Horizontal movement on scroll

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

layout-design
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.


The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?