Jump to content
Search Community

Want to use my own requestFrameAnimation loop to drive... Can I?

jeffg 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

I've got a game in progress that requires sequencing of animations with more sophistication, much as TimelineLite/Max provides.  I'm already tweening and animating canvas and css items, and I control (including starting and stopping) a requestFrameAnimation loop as part of it.  To use TimelineLite/Max I'd have to do too much surgery, I think.  Can I maybe drive it from my own requestFrameAnimationLoop? If all the animations are done, and I stop requestFrameAnimation, will that affect TimelineLite? Can I own the ticker and successfully use TimelineLite/Max ??

 

Thanks

Link to comment
Share on other sites

Sure, I suppose you could although I'm not sure how helpful it'd be. I only see down sides, but I may be missing something.

 

Did you know you can add your own listeners to the TweenLite.ticker? Like 

TweenLite.ticker.addEventListener("tick", yourFunction)

That way you can drive all your stuff off of the GSAP ticker rather than trying to do it the other way around.

 

There are a few nice things about tapping into GSAP's ticker:

  1. It automatically powers down after a few seconds of inactivity (unless you have your own "tick" listeners attached, in which case it'll keep tickin')
  2. It has a lagSmoothing() feature that can be a huge benefit for handling long lags (when the CPU gets bogged down for whatever reason). See https://www.greensock.com/gsap-1-12-0-performance/ for some details. I haven't seen any other engine implement something similar, and it can be a big help. 
  3. The ticker lets you set an fps() (capped at 60fps if you're using requestAnimationFrame, but you can set it lower if you want)
  4. It has fallback from requestAnimationFrame to setTimeout(), plus it works around a bug in iOS that can cause requestAnimationFrame to fail in some situations on initial page load. 
  5. You can sleep() or wake() it manually. 
  6. You can get the time or frame whenever you want. 

All that being said, if you still want to use your own ticker, I suppose you could create a timeline and pause() it and then call the render() method whenever you want to update it, and feed the new time in. You may need to set the "force" parameter to true on your calls so that it doesn't allow for lazy rendering. Again, I'm struggling to see big up sides to unhooking it from GSAP's built-in ticker, but feel free to give it a shot. 

 

Good luck!

Link to comment
Share on other sites

Hmm... Well the reason I wrote the question is that what I really want is your TimelineLite/Max abstraction, to help with chaining, grouping and parallelizing visualizations.  I've already got my own tweens and can run them in order, with a callback on completion, and a ticker that drives this.  So let me ask you directly: is there a way I can use your TimelineLite/Max wth my own tweens & ticker e.g. '3rd' party tweens and animation drivers?

 

Looking at your code with it's idioms it's a bit tough to see how to do this...e.g. the relations and dependencies between your tweens & ticker and your timeline is hard to glean for me... I see a roottimeline created in the tween code, but unraveling how events flow and how and when the timeline code needs to get called are non-obvious.  Perhaps it's too complicated to be worth it...?

Link to comment
Share on other sites

Yep, I think it's too complicated to be worth it. GSAP is built on a very integrated architecture, so all tweens and timelines share a base class that has a certain set of methods that are used throughout. I doubt your tweens conform. It must handle GC as well, instantiating things properly in the right order, accommodating timeScale in a trickle-down fashion, move things around on parent timelines when necessary to make things perfectly smooth, etc. In short, a LOT of work has gone into crafting this structure and it's not as simple as "oh, let me use my own custom tween objects inside a GSAP timeline and expect things to work" :)

 

I'm still having a tough time understanding why you wouldn't just tap into a tool (GSAP) that's specifically built to do what you're doing, and it's already all integrated. Granted, I'm totally biased but I just don't get the motivation here. GSAP is a super high-performance, very robust system - is there something your custom tweens do that GSAP can't? What exactly is the down side of using the ticker in GSAP for your requestAnimationFrame stuff? 

  • Like 1
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...