Loop an element continuously

Video

In this episode, Sacha, cofounder of the Gemeos Webflow agency, shows you how to make an element scroll in a loop.

‍

1. Select the element that will trigger the animation

1. Select the element you want to animate (e.g. link_wrapper_contact)
2. Click in the Interactions panel and choose the “Scroll into view” trigger

‍

2. Create the animation

1. Select the “Move” animation

‍

2. Set a default position for your element: 0 PX

‍

3. Add a transition to change the element’s position and set the animation duration: -2500 PX in 40 sec (for example)

‍

4. Add a transition so the element returns to its default position once scrolling is complete: 0 PX and 0s Duration

‍

3. Apply the Loop setting to the animation

Check “Loop” in the trigger settings so the animation repeats continuously