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
#2

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
Retrigger viewport
Knowledge base: Guides from the Tumult Team
(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


(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) {
		window.loopCount++;
		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 :))


(Alex) #8

HI @Daniel,

This is quite simple way to make timelines play only once.

In my case, there are two timelines, and I set two triggers to play two timeline on eneter viewpoint, and I want to the timelines place only once too.

But, if set the trigger at flexible layout as the screenshot:

It will not work, the timelines will play once the scene is loaded, but not on enter viewpoint of triggers, when we view of the content, the timeline already finished.

and only if set the trigger as this screenshot, it will work:

i test a lot, and quite sure this could be reproduced every time.

Please check the test file at:

https://www.dropbox.com/s/60dku2k6l6nixa3/playonece%20on%20enter%20viewpoint.hype.zip?dl=0

Is it a bug or what I missed something please?

Alex


#9

I think the element is very very briefly in the viewport while the responsive layout is being calculated, so at a minimum you should pin to the ‘top’ using the flexible layout properties to avoid this bug.
I’ve filed this as a bug, thanks!