Posted December 21, 2017 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. Share this post Link to post Share on other sites
Posted December 21, 2017 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. 2 Share this post Link to post Share on other sites
Posted December 21, 2017 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. Share this post Link to post Share on other sites
Posted December 21, 2017 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. 1 Share this post Link to post Share on other sites
Posted December 21, 2017 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. 3 1 Share this post Link to post Share on other sites
Posted December 21, 2017 Thanks. Yes I am in Europe. Perfect @Carl I had thought it was attached to an instance. I hadn't realised it applied globally. Share this post Link to post Share on other sites
Posted December 21, 2017 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) Share this post Link to post Share on other sites
Posted December 21, 2017 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. 3 Share this post Link to post Share on other sites
Posted December 21, 2017 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. Share this post Link to post Share on other sites
Posted February 12 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 Share this post Link to post Share on other sites
Posted February 12 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. 2 Share this post Link to post Share on other sites
Posted October 7 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! Share this post Link to post Share on other sites
Posted October 7 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? 2 Share this post Link to post Share on other sites
