Horizontal movement 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!
Horizontal movement on scroll

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


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.


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