First of all, thanks for the great work and I (but I belive I speak in the name of the community) thank you for all your hard work that you guys have put on your beautiful product.
I've successfully used TweenMax in past projects in different scenarios (animations, hover effects, games on dom, canvas, svg), but for my current one, I think I might need some extra help .
To explain the issue I'm having, first I need to walk you through my environment: I am basically building a slideshow animation on canvas using TweenMax and createjs (to be more specific only the easel.js lib).
Everything works fine, except that at some point the tweens are jerky. In my app, the browser is doing other things in parallel with the animations and - as expected - this has an impact on the framerate. From time to time the fps drops from 60 to 20-30 and after that it goes back up to 60.
I know that the frame drop is mainly caused by the other things that my app is computing, but of course the effect is more visible on less powerful devices.
The problem is also described in the codepen attached (which is obviously exaggerated in order to point out the evident).
Unfortunately, I can't totally separate the logic from the animation and I need to run many things in parallel, so changing the architecture isn't a solution for my problem.
From my research and try-outs, none of the cool stuff you guys are offering is a real candidate as a solution to my problem, and so far I've tried numerous combinations of ticker and animation settings (raf, no raf, different fps speeds, lagSmoothing and lazy rendering).
After some more research and digging on the net, I'm starting to think that the problem is that I'm approaching the animations like a movieclip: I have a strict duration of time in witch I must go from point A to point B, while I should be approaching them more like a game: moving one step at a time, recalculating positions, velocities and other factors that influence the position of my items on each loop (in our case Timeline.ticker tick event).
In game development, in order to ensure maximum fps while having other important (and probably CPU intensive) logic computed (such as collision detection or multiplayer sync), the most common approach is to implement a fixed time step loop (there are many other useful articles on this on the web, but this was one that explained the solution more clearly).
I myself tried to implement this approach using my current architecture but failed and in order to not rewrite everything from scratch, I looked into implementing this kind of solution in the gsap animation engine. While I (clearly) don't know what I'm doing, it seems that this kind of implementation can be either implemented in the core Animation object (as an extra option, just like lagSmoothing) or as a plugin. The latter is more convenient, but from my understanding, plugins are targeting animations and specific parameters, while I would want to be more generic and target a timeline of tweens, not a specific property.
Now that you've had the patience to read my lines, my questions for you are:
Do you consider that having a fixed time step loop solution might fix my problem?
Do you have any other suggestion that might help me solve my issue?
Can the solution I presented be implemented as a plugin (if yes... could you provide some basic steps?)
Have anyone else (because I couldn't find anyone else) suggested this approach for gsap?
I look forward to your answer, because I really want to make this work with gsap and not to have to rewrite all my animation engine from scratch.