Horizontal movement on scroll

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

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

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.


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