Reveal on scroll

Create a trigger that fades and moves elements in as your scroll down the page.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

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.

Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback