Reveal elements on scroll

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
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.


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form