Jquery (javascript) timing when exporting to movie

I am working on a project (using Hype 3.5.1) containing some animations that are pure Hype and some that are javascript (mostly jquery but not all). I need to deliver this particular project as a movie (mp4).

My animations (Hype and javascript) run at one speed when previewed in a browser but at quite different speeds (in relation to each other) when exported to a movie, depending on the frame rate I export at.

How can I achieve consistent speed between the Hype animations and the jquery (javascript) animations?

I am attaching a simple test document to show what I am talking about. Two pictures of timelines are gradually revealed over a period of 10 seconds. The top one is done in pure Hype; the bottom one is a jquery animate() (both are set to linear easing). Preview it in a web browser and you will see that both timelines are revealed in synch. Export to a movie and, depending on the frame rate chosen, one or other completes faster than the other (in the case of 60fps, the jquery animation completes ridiculously quickly).

As far as I can tell, the Hype animations take the same time to complete in the movies irrespective of the frame rate chosen, and the jquery animations run at the same speed as the Hype animations in a web browser, so why don’t they when exported to a movie?

Any advice would be much appreciated.

Timing_Tests.zip (56.6 KB)

Hi Philip!

My general idea is to give the animation more time and match the exported .mp4 frame rate to this time: “15000” & 15fps; in practice it is slightly off. The number I have used is “14250” - still needs some tweaking. At this point I am out of time.

$(’#JqueryMask’).animate({left: “+=1500”}, 10000 , “linear”, function() {});

Adjusted: (exported at 15 fps)
$(’#JqueryMask’).animate({left: “+=1500”}, 14250 , “linear”, function() {});

Thanks, Jim,

Yes, I have been thinking along the same lines. Since posting my question I have found out that by default jquery animations run at 13 fps and therefore the formula for adjusting the animation time (in the case of jquery at least) is:

‘time’ x ‘export fps’ / 13

10000 milliseconds exported at 15fps needs to be 11538 milliseconds
10000 milliseconds exported at 60fps needs to be 46154 milliseconds

BUT, surely I shouldn’t have to adjust like that. Why, when exporting to a movie, does Hype not export (javascript) animations according to the time of the animations. Hype is obviously doing some sort of calculations with animations created on its own timelines (because they take the same amount of time in a movie whether exported at 15fps or 60fps). Shouldn’t it make the same sort of calculations with animations created with javascript inside Hype?

If it isn’t a bug, can I please request adjusted behaviour as a feature! :wink:


though hype tries to be as open as possible for third party involvements … i don’t think it’s a bug neither a good request because the next one will use another library nobody yet knows of or jquery changes its defaults … to much out of control here …

1 Like

I second Hans’ post. It’s because there are so many variables ( pardon the pun) it’s difficult to accommodate all.

May I suggest a screen capture if you need to have the animations as movies. Using something like ScreenFlow / Quickcast / (other brand here). That way you can get the exact animation as a .mp4.