Loop and stop after third loop on specific frame

I have javascript to loop the banner 3X which works. But the animation fades out at the end and on the third loop I want it to stop on frame 14 where everything is still on screen. Can anyone help?

Sounds like you need to create a timeline action at frame 14 which runs logic like: "If this is the 3rd loop, pause here"

There's some logic you could borrow from this post: Set number of loops - #4 by stephen

if (window.loopCount == 2) {
hypeDocument.pauseTimelineNamed('Main Timeline');

I tried this approach and all I get are the three loops... it does not stop on 14.

Also the sample you reference is on just looping, not then stopping on a specific frame after three loops... the is issue is the banner fades out so I want that last loop to stop on frame 14 not go to the end,

in fact you can do something like this by using an additional timeline which controls the progress/state ... without any custom js

simplified example:
stateMachine.hype.zip (13,2 KB)

Not really following.. I am looking for a clean javascript solution....to loop three times and stop on frame 14.

I have over 100 banners to produce and I need a solid solution that does include JS.

in js you can use requestanimationframe to check a current time in the maintimeline and then stop when needed

Set a timeline action at the end of the banner with something like this

if (window.loopCount <= 2) {
hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)
}

and then as Daniel suggested something like this at frame 14

if (window.loopCount == 2) {
hypeDocument.pauseTimelineNamed('Main Timeline');
}

Example project:
Loop & Pause.zip (11.6 KB)

Credits to this thread

3 Likes