Timeline Action only runs on first timeline use

I’m probably misunderstanding how to use “Continue Timeline” properly.

I have a timeline with a TimeLine Action to call a javascript function on the 1st frame.

On the final frame of the timeline I have another Timeline Action which does this:
run javascript
pause this timeline
go to 1st frame of this timeline

If I setup a button to “Start Timeline” it works, but pressing the button again during the animation restarts it which I don’t want.
If I change the button action to “Continue Timeline” then the javascript on the 1st frame only gets called the very 1st time it runs.

I want the button to be able to repeat the timeline but I need the javascript on the 1st frame to run each time, why isn’t the javascript being run every time it continues?

Timeline actions are only run when the timeline is running. So, just going to the first frame doesn’t run the action there given you stopped because the timeline ended before.

There is a code solution as long as the Hype doesn’t offer running timeline actions while paused:

Share your document for more explicit help as it might not need code and can just be solved with the right order in triggering.

Thanks for the response but I don’t want the javascript to run when I go to the 1st frame and the timeline is paused. I want it to run when the timeline continues from the 1st frame.
If i start the timeline it always runs the script but continuing from being paused on the 1st frame doesn’t.

It’s not a problem for me in this project as I can work around it. It just took me a long time to track down why my code wasn’t running as expecting so I was hoping to understand why it behaves this way.

Please provide an example file.

Here it is. I’m creating an ‘infinite’ scroller which just has 2 images. Each timeline will allow me to have a different animation to move between image1 and image2.

I have an init() function to setup 4 test images in an array. this sets image1 and image2 to the 1st 2 images from the array.
When the timeline starts the timeline action calls startReveal(). This sets image2 to the next image I want to be revealed.
At the end of the timeline an action calls the javascript function endReveal(), I swap the image sources so image1 now has the image that was revealed. At this stage I also pause the timeline and set it back to the 1st frame.
This resets the system so I’m ready to do the same over and over and it works for an unlimited number of images. Every reveal timeline I build will hide image1 and reveal image2 but their sources are dynamically changing, for this test it’s just a simple fade out and fade in.

There are 2 buttons on the test, the one which starts the timeline works every time, you’ll see it shows image 1, 2, 3, 4, 1, 2, 3, 4 as required. If you use continue timeline button it’ll work the 1st time, every time after that you can see startReveal() isn’t called as it’s stuck on the same 2 images, you’ll see image 3,2,3,2 for example.

continue timeline action.hype.zip (70.8 KB)

This isn’t the answer to continue timeline but a simplified approach. Hope that is okay.

slider.hype.zip (88,1 KB)

Update: About the question as that should be answered to deepen knowledge. Timeline actions only run while in a play state and you are pausing in endReveal

If you want the startReveal timeline action to run again when playback is continued there seams to be a gap in the timeline engine. If you jump to a frame containing a timeline action but in a paused state the action is not triggered. When you continue timeline from that point the frame is already marked processed. That is in my opinion the difference to start timeline as that command reset the timeline and processes every frame fresh while starting over.

1 Like

Thanks for the explanation. I can work around this but at least I know what I shouldn’t be doing.

Hey Julian,

your welcome. Was playing around with a symbol as a slide as I liked the general idea. Much potential to make it even more streamlined and currently it uses only one timeline call forward. It plays that timeline forward and backwards but probably better to create a separate timeline for backwards. Interactions are on swipe.

slider_symbol.hype.zip (84,7 KB)

1 Like