In this lesson:
- Set up a page scroll animation
- Add a move action
- Add an opacity action
- Add a second point
Set up a page scroll animation
- In the Interactions panel, choose While Page is Scrolling from On Current Page menu
- Under On Scroll, choose Play Scroll Animation
- Click the plus sign next to Scroll Animations
- Name it (e.g., Hero Scroll Animation)
Add a move action
- Make sure your element is selected
- Still in the Interactions panel, click the plus sign on the timeline
- Choose Move
- Under Move, change the x-axis to 0 pixels
Add an opacity action
- Click the plus sign to add another action
- Choose Opacity
- 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
- Make sure your element is selected
- In the interactions panel, change the x-axis to make the element to move left (e.g., to -900 pixels)
- Click the plus sign at the end bottom of the timeline for this element to add another Opacity action
- 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.
