Studio Editor: Adding a Scroll Animation

5 min read
Add scroll animations to make the browsing experience more engaging and memorable. The animation's progress is directly linked to the scroll position, revealing or transforming an element as visitors scroll up and down. 
Tip:
Check out our Wix Studio Academy course and learn more about adding animations & interactions.
In this article, learn more about:

Adding a scroll animation

To add a new scroll animation, select the element that triggers it. The animation you choose starts when visitors scroll past this element. Then, decide which element gets animated and select an animation path.
An example of a scroll animation on a live site

To add a scroll animation:

  1. Select the relevant element or section.
  2. Click the Open Inspector arrow  at the top right of the Editor.
  3. Click the Interactions tab .
  4. Click + Add under Scroll.
  5. Set up the animation:
    1. Choose which element shows the animation under Animated element
    2. Select an option under Animation path to decide on the way the animation starts, in reference to the element you designed. You can make the design on canvas the animation's start point (From its design) or end point (To its design).
    3. Select an animation from the list.
      Tip: Hover over animations to see a preview of how they look. 
Hovering over scroll animations in the Inspector to see their preview

Customizing a scroll animation

After choosing an animation, set it up to behave the way you want. The available settings depend on the specific animation you choose.

To customize a scroll animation:

  1. Select the relevant element or section.
  2. Click the Open Inspector arrow  at the top right of the Editor.
  3. Click the Interactions tab .
  4. Click the animation you want to change. 
  5. Click Adjust Animation to change its settings:
    • Direction: Choose the direction the animation should come from (e.g. from left, from above).
    • Scale: Set the target size for the element in this animation. For example, 80% means the element shrinks by 20% in the animation. 
    • Distance: Decide how far the element moves in this animation.
    • Animation area: Decide at what point while scrolling the animation starts and stops. 0% is the bottom of the screen and 100% is the top. For example, if you set the area to 100%, the animation starts when the element is at the bottom, and ends when it reaches the top. 
Tip:
Enable the Scroll to preview toggle to see the animation you're creating, directly on the canvas. 
A GIF showing that while you adjust a scroll animation, you can also preview it on the canvas

Setting the scroll animation area

Decide at what point while scrolling the animation starts and stops. 0% is the bottom of the screen and 100% is the top. For example, if you set the area to 100%, the animation starts when the element is at the bottom, and ends when it reaches the top. 

  1. Select the relevant element or section.
  2. Click the Open Inspector arrow  at the top right of the Editor.
  3. Click the Interactions tab .
  4. Click the animation you want to change. 
  5. Click Adjust Animation
  6. You can click the dots to set the percentage manually
You can click the dots to set the percentage manually
There's a preview of the current location in the range as you scroll in the Editor. So you can get a better visual understanding. 

Removing a scroll animation

You can remove a scroll animation at any time from the Inspector panel. 

To remove a scroll animation:

  1. Select the relevant element or section.
  2. Click the Open Inspector arrow  at the top right of the Editor.
  3. Click the Interactions tab .
  4. Hover over the animation and click the More Actions icon .
  5. Click Remove.
Removing the scroll animation, from the Inspector panel

Did this help?

|