I have built an infographic which has various animations playing as you scroll down.
For each of these I have created a separate timeline and selected to play on entry to viewport.
When you scroll down and back up again the animation replays but ideally I would like it to remain at the end of the animation, in this case a group of text boxes that have appeared. I would like these text boxes to stay on screen from now on.
Hopefully someone can help?
You could have the viewport action ‘Continue Timeline’ instead of ‘Start Timeline’ — if it has triggered once then nothing will happen the second time. This requires a ‘pause timeline’ action at time 0.
Hi Daniel, thanks for your help,
That sounds helpful, so Enter Viewport would be 'Continue Timeline'?
And I assume exit viewport set at pause timeline. The counter doesn't appear on the pause timeline selection.
Thanks
Yup! That would be a nice way to approach it. You might also be interested in this technique, which lets you link the scroll position to an animation: How to "Scroll Synchronize" using Scroll Magic - #3 by DBear
Thanks again, here's what im doing at the moment.
On Enter Viewport -
Action: Continue Timeline
Timeline: Name of Timeline
On Exit Viewport -
Action: Pause Timeline
Timeline: Name of Timeline
But unfortunately the animation keeps starting again and rerunning when you scroll back up the page.
Hope you can help.
Perhaps there is some javascript to make the animation only run once then I can do this:
On Exit Viewport -
Action: Run Javascript
Timeline: Name of Timeline
If you can share your document we can try to figure it out.
Make sure you don't have 'can restart timeline' checked in the 'continue timeline' action. If that's not it, can you share your document?
Another thread on this issue that might be helpful: Have a viewport timeline animation play only once
Here's an example of this in action:
example.hype.zip (16.8 KB)
(This was resolved over email)
Thank you Daniel, thats really helpful and has solved our problem. It looks like my file had leftover erroneous actions. Your solution of adding Continuous Timeline action at the start of the Timeline that the animation on worked perfectly.
Another way I was able to solve the issue was to copy the animation group, delete the timeline and then add a new timeline and then 'paste with animations' back into this timeline.
Thank you so much!
One more quick issue you may be able to help with.
When I upload it to Amazon S3 and view from there in the browser, all the animations fire at once. Is there a workaround for this behavior? (I know there’s some problem with iframes but this isn’t even in an iframe yet.)
If it's different from what you see when previewing from Hye -- I'm not sure what could be going wrong. Can you share a URL?