Jump to content
Search Community

Set framerate on timeline

silid test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

  • Thanks 1
Link to comment
Share on other sites

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.

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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  :-P

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

  • 7 months later...

thnx for the above, I am actually using your engine in one of my projects in the exact way you suggested. I am trying to get a png sequence out of an animation.

 

Is it correct that as long as I pause() and seek to a time() with a high resolution, lets say 100fps,  that I will get that frame-rate even without changing the ticker's methods or framerate? meaning, you don't do any rounding of CSS parameters in the engine itself?

hope question is clear, thnx!

Link to comment
Share on other sites

The values are all calculated on-the-fly and totally resolution-independent so yes, you can get as high-def as you want from the engine itself. However, browsers are typically limited to around 60fps (not always), so if you're expecting to get things running consistently at 100fps that's unlikely. It sounds like maybe you're not talking about runtime, though, so you'd be fine. You don't need to change anything about the ticker. 

 

CSSPlugin does round some px-based values to whole values because browsers only render them that way (so this is a performance optimization). You can disable that if you prefer, on a per-tween basis by setting autoRound:false.

 

Does that help?

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...