Horizontal movement on scroll

Set up a page scroll animation for a continuous animation that moves and fades elements horizontally on scroll.

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

In this lesson:

  1. Set up a page scroll animation
  2. Add a move action
  3. Add an opacity action
  4. Add a second point


Set up a page scroll animation

  1. In the Interactions panel, choose While Page is Scrolling from On Current Page menu
  2. Under On Scroll, choose Play Scroll Animation
  3. Click the plus sign next to Scroll Animations
  4. Name it (e.g., Hero Scroll Animation)


Add a move action

  1. Make sure your element is selected
  2. Still in the Interactions panel, click the plus sign on the timeline
  3. Choose Move
  4. Under Move, change the x-axis to 0 pixels


Add an opacity action

  1. Click the plus sign to add another action
  2. Choose Opacity
  3. 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

  1. Make sure your element is selected
  2. In the interactions panel, change the x-axis to make the element to move left (e.g., to -900 pixels)
  3. Click the plus sign at the end bottom of the timeline for this element to add another Opacity action
  4. 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.


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