Timeline animation play only once on enter viewport

[ben171 (Benjamin Stafford)]

Hi There,

I have a web page that uses the enter viewport action to start a timeline when the user scrolls down the page. Currently every time I enter the viewport it starts the animation again which makes sense but I would really like it to stop after the first instance. I have looked at a few of the other posts (attached below) with a similar issue but I was unable to make those methods work.

Have a viewport timeline animation play only once

Hi folks, I’ve got a great animation done for my new site - [image] I’m using viewport to initiate the timeline, as the animation appears a third of the way down the page. I’d like the animation to run only once, but with the current behaviour it restarts each time the animation enters the viewport. Is there a way to perform some sort of loop test in a piece of Javascript to detect if the animation has already run once, and then stop the animation running a second time. Any help much apprec…

Any hints? Thanks in advance!

[PappaSmalls]

You can use ‘Continue timeline’ instead, and since the timeline has finished, theres nothing to continue

[ben171 (Benjamin Stafford)]

Thanks for the reply!

I tried continue timeline in the enter viewport action but then the timeline doesn’t play at all - I’m feeling a bit frustrated as I feel i’m missing something!

[ben171 (Benjamin Stafford)]

I got it! Thanks so much for your help.

[david_it (David)]

You can post an example please (without code JS)? I can’t stop the animation after the first view/load.
Thank you very much

[Daniel]

Are you saying you want your animation to not play again when refreshing the page? (But it should play once on first visit?)

[david_it (David)]

Not refresh the page, but when it is visible by scrolling page, without refresh the page. I used viewport.

[Daniel]

You would set your viewport action to ‘continue timeline’ — so your timeline will keep trying to continue but it can’t.

Have a viewport timeline animation play only once

This doesn’t really need code. You would have your action be a ‘Continue Timeline’ action. If your timeline has already played and an additional ‘Continue timeline’ action is triggered, the timeline (which is already at its end) will not run again. Alternatively, you could use something like the the JavaScript version of this suggestion from Stephen: Set number of loops

[david_it (David)]

I see what was wrong…
Creating the animation inside a symbol, in the main timeline, under the symbol layer created, was created a “blue line”, almost like represent the animation/time inside the symbol. With this items, the viewport is not working. I delated this “blue line” below the symbol, only in this way, the viewport works well!
Many thanks and sorry, but using hype (purchased on mac app store, standard + pro, black interface) only 1 week. Congratulations to the all team.