Set framerate on timeline

[silid 0 Likes (Newbie)]

If I create a new Timeline set to use frames for timing eg.

var tl = new TimelineMax({ useFrames: true });

 

How do I set the frame rate of the timeline?

 

The only example I can find is for setting the frame rate is for a tween, rather than a timeline, and the ticker property doesn't exist for a timeline.

 

TweenLite.ticker.fps(60);

 

I am migrating some flash animations to JS and I need a frame rate of 50.

 

is it possible to set a frame rate for the whole timeline?

 

Thanks.

[OSUblake 7,663 Likes (Superhero)]

Hi @silid

 

You can't set the frame rate for a timeline, just for a ticker. There is a way you could manually update a timeline at 50fps, but that requires some work. Can you make a demo of what you're trying to do? There might be a better way to do the conversion. 

[silid 0 Likes (Newbie)]

Thanks for the reply.

 

I'm making animation for broadcast and work in 50 fields per second. So it isn't a particular animation I want help with, I just want to be able to count in frames at a rate of 50 fps. 

 

When using flash I set the frame rate of the stage and that was fine. I'm looking for the equivalent as I migrate.

 

I presume that when I set the timeline to useFrames it is using 60fps?

So if I set timeScale(0.833333) I will get 50 fps approx?

 

It seems the easiest way is for me to alter the Ticker class to make 50 the default value. But ideally fps would exist as a variable that is passed from the tween to its ticker and from a timeline to a tween to a ticker.

[OSUblake 7,663 Likes (Superhero)]

1 minute ago, silid said:

Thanks for the reply.

 

I'm making animation for broadcast and work in 50 fields per second. So it isn't a particular animation I want help with, I just want to be able to count in frames at a rate of 50 fps. 

 

50fps seems like a weird number, like with old analog signals and PAL. Are you in Europe?

 

8 minutes ago, silid said:

I presume that when I set the timeline to useFrames it is using 60fps?

So if I set timeScale(0.833333) I will get 50 fps approx?

 

To be honest, I have never dealt with using frames, nor have I seen any questions on this forum (html5/js) about using frames, so that is something that @GreenSock or @Carl would probably have to answer.

 

So I'm not 100% sure about the update frequency, but if you set the timeScale like that, then the playback speed will be probably be more like 50fps. If that's what you're going after, then setting the globalTimeScale might be a better option.

 

 

[Carl 8,106 Likes (Superhero)]

TweenLite.ticker.fps(60);

 

Isn't just for tweens its for the global ticker which controls the refresh rate for everything (tweens and timelines)

TweenLite.ticker is basically the "heartbeat" of the entire engine. Everything is synchronized with those ticks and will refresh at the given fps.

Set it to 50 and you are good to go.

 

[silid 0 Likes (Newbie)]

Thanks. Yes I am in Europe. 

 

Perfect @Carl I had thought it was attached to an instance. I hadn't realised it applied globally.

[OSUblake 7,663 Likes (Superhero)]

29 minutes ago, Carl said:

TweenLite.ticker.fps(60);

 

Isn't just for tweens its for the global ticker which controls the refresh rate for everything (tweens and timelines)

TweenLite.ticker is basically the "heartbeat" of the entire engine. Everything is synchronized with those ticks and will refresh at the given fps.

Set it to 50 and you are good to go.

 

 

I was kind of curious about frames because I've never dealt with that.

 

My concern with setting the fps to 50 is that 50 is a very hard number to hit using requestAnimationFrame. So I'm wondering if it might be better to also set useRAF to false?

 

TweenLite.ticker.useRAF(false)
TweenLite.ticker.fps(50)

 

[GreenSock 6,118 Likes (Superhero)]

I'm not sure that'd help, Blake, because typically screens run at 60hz anyway, so even if setTimeout() was used it's not really gonna look much different. 

 

Frankly, my plan is to remove support for useFrames in GSAP 2.0.0 because it's so infrequently used and I don't think it merits the kb. So it'll always be in 1.x, but I would encourage folks not to start depending on it too much for future versions. Like I said, almost nobody uses it (from what I can tell). If I hear from a lot of people that they need/want it, I'll certainly reconsider. 

[OSUblake 7,663 Likes (Superhero)]

17 minutes ago, GreenSock said:

I'm not sure that'd help, Blake, because typically screens run at 60hz anyway, so even if setTimeout() was used it's not really gonna look much different. 

 

Good to know. I wasn't sure about that because I know the time difference between updates could vary a lot more with rAF.

[Poppe76 0 Likes (Newbie)]

Am also looking for info concerning the frame rate regarding greensock js timeline animations.

It's a pain in the neck to find a good solution for my coworkers to migrate from timeline animations in Flash projects to animations for html5/js. Especially when they want to continue doing their animations in the timeline in Animate.

A whole heap of issues when not wanting to use canvas  :-S

Need the frames of the animation, to be able to convert the animation result into movies in our system. Have to be able to get the animation frame by frame.

Any suggestions are welcome

 

 

Also, many displays these days are able to adjust the frequency according to the frame rate of the content being displayed. So using 50, 60, 100, 120fps are all possible.

Well at least for the displayed used for smart solutions, tvs and screens in stores and what not 

 

And i'll take a normal frequency of 25/50/100 any day over something as weird as 29.97fps 

[GreenSock 6,118 Likes (Superhero)]

Did you have a particular GSAP-related question we could help with? Were you saying that you want us to keep the useFrames feature in 2.0.0 or were you jut asking for general suggestions for taking an Animate CC project that uses GSAP for all its animations and recording it as a movie/MP4? 

 

If you've got all your animations in a TimelineLite/Max, you could pause() it and then advance it one frame at a time manually by setting its time() in a setTimeout() loop or something. You'd simply do the math to figure out how much time each frame would be (like 60fps would be 16.67ms per frame) and increment things accordingly.