"While Scrolling In View" to only happnen ONCE!

Hi all,

Okay so I’ve been learning Webflow animations for a couple months now, and I used to use the preset ones, now I’m doing my own with the “move” “scale” etc.

However they keep repeating when scrolling up and down and i can’t find a way to make them happen only once!

I’ve been told to look under “Scroll into view” but there’s only a “timed animation” for custom movements, nothing for it happening at certain point.

Help would be amazing! Thank you!


Here is my public share link: https://preview.webflow.com/preview/noughty90s?utm_medium=preview_link&utm_source=designer&utm_content=noughty90s&preview=ad5abe3376b90083bae96a46d4eae065&pageId=5e7b3211d160ce543d1c8f1e&mode=preview

Real site link: https://www.noughtydnb.co.uk/app

Hi,

You have the trigger set up as “While scrolling in view” when it should be set up using “Scroll into view”.

If you set up a time animation you can make it so that the timed animation will trigger and play when the element is scrolled into view by a set amount. The animation will then change the state of the element and will remain in it’s new state unless told otherwise.

So for example with your phone animation, set up a scroll into view trigger and set the scale 0, and make this the initial state on the animation. This means when the page load it will be liked that by default. Then an instruction with it after to scale to 1 with a duration of however long you want it to last, and it should work. You can also decided at which point in the element scrolling into the view you want the animation to trigger by using offset.

Hope this helps :slight_smile: