Horizontal movement on scroll

In this lesson:

1. Set up a page scroll animation
2. Add a move action
3. Add an opacity action
4. Add a second point

Set up a page scroll animation

1. In the Interactions panel, choose While Page is Scrolling from On Current Page menu
2. Under On Scroll, choose Play Scroll Animation
3. Click the plus sign next to Scroll Animations
4. Name it (e.g., Hero Scroll Animation)

Add a move action

1. Make sure your element is selected
2. Still in the Interactions panel, click the plus sign on the timeline
3. Choose Move
4. Under Move, change the x-axis to 0 pixels

Add an opacity action

1. Click the plus sign to add another action
2. Choose Opacity
3. Make sure the opacity is set to 100%

Repeat the move and opacity actions for each element you’d like to effect. 

Add a second point

1. Make sure your element is selected
2. In the interactions panel, change the x-axis to make the element to move left (e.g., to -900 pixels)
3. Click the plus sign at the end bottom of the timeline for this element to add another Opacity action
4. Change the opacity to 0%

Repeat this for each element with varying x-axis values (e.g., 900 pixels to move right instead of left) 

Toggle Live Preview to On to see your work in action.