Animation loop not working properly

Design help Animations & Interactions
1

Hi all,

I’ve spend a frustrating good amount of hours creating an animation to showcase 2 UX flows on 2 phones for a case study. I want the animation to be triggered by scrolling into view, and loop continuously.
The start to finish animation works perfectly. However, when the loop starts, and the animation starts from the beginning it’s not working properly…

  • The blocks on the phone should be grey (opacity 20%) from the start, and only highlighted by black (opacity 100%) once the animation reaches it’s topic. When the loop starts, all the blocks from the topics on the phone are already highlighted in black (opacity 100%), even though the initial state in the interaction is grey (opacity 20%).
  • The first flow (find a donkey) the loop starts with black and fades into grey. The second flow (manage your donkey) the loop starts and stays black.

Any idea what I should add/delete to make sure the loop is showing the same from the start?

The animation is at the “User Flow” section below:

Here is my public share link:
https://preview.webflow.com/preview/sanshinedesign?utm_medium=preview_link&utm_source=designer&utm_content=sanshinedesign&preview=9faf67b7a338fff3be27c1b48ffa73d9&pageId=66a781410a4b2a1786a6e045&itemId=66a7814657582fc4c585dafe&locale=en&workflow=preview

2

The initial State does not reset when looping. Try telling these black elements to transition back to their initial opacity settings before the interaction completes.

loop
loop1800×959 76.1 KB

3

Yes that worked! Thank you so much! :smiley:

1 Like