Where is 'Slide in right' on GSAP interactions?

Design help Animations & Interactions
1

I’m new to GSAP interactions. I’ve just applied an interaction on an item to ‘Slide in left’ when scrolled. All great, but I have another item next to it that I’d like to ‘Slide in right’ when scrolled too - but no such option exists?

I’m sure I’m missing something obvious here?!

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Hi there,

To create a slide-in from the right effect, follow these steps:

  1. Select your element and open the Interactions panel
  2. Click the + icon next to Element Trigger
  3. Select “Scroll Into View” as the trigger
  4. Choose “Start an Animation”
  5. Add a Move action and enable “Set as initial state”
  6. Set the x-axis position to +50 pixels (this places the element off-screen to the right)
  7. Add another Move action and set the x-axis position to 0 pixels (this brings the element back to its original position)

You can adjust the animation’s timing, easing, and offset in the animation settings to fine-tune the effect. The +50 pixels value can also be adjusted depending on how far you want the element to slide from.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like