Have a viewport timeline animation play only once

(Stephen Voisey) #1

Hi folks,

I’ve got a great animation done for my new site -

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 appreciated, thanks folks

Timeline animation play only once on enter viewport
Start Timeline at Scroll Position

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

Timeline animation play only once on enter viewport
Knowledge base: Guides from the Tumult Team
Retrigger viewport
(Stephen Voisey) #3

Thanks Daniel, Stephen.

I used the Javascript to get this to work as I liked, tweaked to run just once and adding the event to the padlock’s viewport event. This then worked a treat :slight_smile:

Many thanks,


(Stephen Voisey) #4

Just a quick follow-up for anyone using this technique. I created a second animation on the page, but found the javascript didn’t help control the animation timing, it simply started before I got to it further down the page.

The issue, I suddenly realised today, was that the earlier script had already looped once, so the script has to change from 0 to 1 and <2 instead of <1 from the first script.

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

And so on, for any following animation using viewport and this script. Alternatively, create a different loopCount variable name for each animation. I’m sure there will be a better way, but this worked for me.

(J S Poyser) #5

Hi Pathfinder, I used this code too and it worked perfectly. I now need it to stop on the last loop but on a specific frame.
Do you know how?
I placed a timeline with this Javascript:

hypeDocument.pauseTimelineNamed(‘Main Timeline’);

It pauses but cancels out the loop.

thank you.

(Stephen Voisey) #6

Sorry for the delay in replying. Super busy finishing a project. Sadly I don’t know at this point, although there is probably a way to add more to the javascript control.

First off, I’d add a marker to the time line where you want the animation to stop, and perform some sort of action on it with Javascript call. Your javascript should do a for loop looking for the amount of loops you want to do, but then after a certain number of loops to stop the time line playing.

(David) #7

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