Manually calling GSAPs ticker

[rag]

Hi,

I'm exporting a canvas animation with CCapture. In that animation I have a repeating tween. As soon as I start capturing, the canvas framerate is dropping to about 30fps, but the Tweens FPS is still at 60, so in the exported video, the animation runs much faster. Is there a way to disable the requestAnimationFrame inside GSAP and manually call it's tick function? I could set the FPS to 30 but it's not really constant 30fps so I would end up with a tween with uneven timing. Or do you guys have any other ideas?

[Dipscom]

Have you considered using the .ticker property?

 

https://greensock.com/docs/TweenLite/static.ticker

[rag]

I think need it the other way around - this allows me to hook into GSAPs ticker, but I need GSAP to hook into my ticker. This is because CCapture runs some magic that makes requestAnimationFrame run slower while rendering the video.

[Dipscom]

You can disable GSAP's use of RaF and set a fps with the .ticker - I mean, do you know for a fact that is is running dead on 30fps?

 

Otherwise, the only way I can think of is if CCapture has a way to trigger a callback on each frame. Then, you could pause your animation and write a helper function to make it step one frame each time CCapture calls.

[rag]

No, I can't be sure it's exactly 30fps. I think I'm better off with another tweening solution for this task then. Thanks!

[Dipscom]

Ok so, I had a quick skim over CCapture's intro page and saw that it calls a render() function so, in theory, you could do as I suggested. Have your animation paused and on each call to the render() you move it by one frame.

[OSUblake]

Hi @rag

 

GSAP animations are frame independent. If it's recording at 30fps, you can slow your animation by half to get double the frames. But that's not exact.

 

If you want 60fps, you will need to record your animation 1 frame at a time, like here.

 

http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview