Reveal elements on scroll

Fade and move page elements on scroll. 

In this lesson:

1. Create the trigger
2. Create the animation
3. Apply the animation to other elements

Create the trigger

1. Select your trigger element (e.g., Project Link) and click into the Interactions panel
2. Click the plus sign next to Element Trigger
3. Choose Scroll Into View from the dropdown menu
   
   

Create the animation

1. From the Action menu under When Scrolled Into View, choose Start an Animation
2. Click the plus sign next to Timed actions
3. Name it (e.g., Move up on scroll)
4. Click the plus sign next to Timed Actions and choose Move from the dropdown menu
5. Under Move, change the y-axis to 50 pixels
6. Next to Timing, toggle on Set as initial state
7. Click the plus sign next to Timed Actions and choose Opacity from the dropdown menu
8. Change the opacity to 0%
9. Next to Timing, toggle on Set as initial state
10. Click the plus sign next to Timed Actions and choose Move from the dropdown menu
11. Under Move, change the y-axis to 0 pixels
12. Adjust Easing and Duration
13. Click the plus sign at 0 seconds in the timeline and choose Opacity from the dropdown menu
14. Change the opacity to 100%
15. Adjust Easing and Duration
16. Next to Affect choose Class
17. Click All elements with this class and choose Only children with this class
    

Apply the animation to other elements

1. Close out of the animation and click into the Interactions panel
2. Under Trigger settings, make sure this animation is applied to all elements with this class (e.g., Class: Project Link)

Check your work in preview mode.