Reveal elements on scroll

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top