Animation

Scroll an element in a loop

outils :
Illustration croce

Table of contents

Video

1. Select the element that will trigger the animation

  1. Select the element you want to rotate (ex: link_wrapper_contact)
  2. Click in the interaction panel and choose the “Scroll into view” trigger

2. Create the animation

1. Select the “Move” animation

2. Assign a default position to your element: 0 PX

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

4. Add a transition for the element to return to its default position after scrolling is complete: 0 PX and 0s Duration

3. Apply the Loop characteristic to the animation

Check “Loop” at the trigger level for the animation to loop

Photo de l'auteur
Sacha D.
Publié le
16/5/2024
Mis à jour le
16/5/2024
Product Designer, la tête créative du duo. Il dirige les projets du début à la fin, assure la direction créative de Gemeos et s'assure que tous les projets atteignent les résultats souhaités.
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time