Jump to content


Animation to video

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

Hi guys,

            I am looking into building an adverting system that would use GS at it's core. I am going to use bottom end android tables as display units and I currently find that animations are jerking due to the low spec CPUs.  I know that there is some GPU support in CSS3 but I am not sure how practical or applicable this is to the mobile platform.


Having said that I know that most of these low spec tablets do have quite good GPU's for video playback up to 1080p 30fps and I am only looking for 720p 30-60fps. So what I am looking to do is use the 'save to image' function of canvas and either post to the server or use something like PhantomJS in Node to render the frames to a folder then use ffmpeg to stitch them into mp4s at the desired frame rate. This would also allow a host of other effect to be applied programmatically.


I know that GS plays nice with KineticJS for canvas rendering and I have altered the codepen example (

See the Pen xaDAG by GreenSock (@GreenSock) on CodePen

) to use the tick event listener as a test. I am however worried that this is not synchronous and would not post to the server fast enough to capture all the frames if run clientside.  Should I rather use seek to jump a frame forward at a time and then render the canvas out.  Does seek work with the KineticJS plugin?


Many thanks in advance, any other approaches welcome.





Link to comment
Share on other sites

Absolutely, seek() works with KineticPlugin. If you're worried about processing time with saving the data out to the server, then yes, it's probably best to just put your animations into a TimelineLite that's paused and then manually seek() whenever you're ready to go to the next frame. That's the nice thing about GSAP - it should make that very easy for you, and everything remains perfectly synchronized. The only slightly tricky thing is the fact that by default the plugin automatically offloads the draw() of each altered KineticJS layer to the main requestAnimationFrame loop, so when you seek(), it may take a few milliseconds to actually trigger the draw(). Don't worry - that's easy to solve too. You can just use an onUpdate on your TimelineLite to call a function that does the draw() call for your layers. You'd just need to keep track of the layers you need to draw so that you can run those calls, but hopefully that's not too much of a challenge. 


Good luck with the project - we'd love to see what you come up with, so please keep us informed. 

Link to comment
Share on other sites

That is perfect .. many thanks for the prompt reply and taking the time to elaborate (not just a one liner), it is appreciated.


I'll definitely give you guys a preview when it's done.


Have a fantastic Thursday.



  • Like 1
Link to comment
Share on other sites

  • 4 years later...

Hey Murrayson,


I know this post is pretty old so I don't necessarily expect a response, but I've implemented program almost identical to what you described above except I've been using Puppeteer instead of Phantom.js since its been deprecated and I've been using Puppeteers built-in screenshot feature instead of drawCanvas() as you proposed.


Everything has gone great on the GSAP side except that Puppeteer keeps crashing unexpectedly with no errors, so I'm questioning whether it would be suitable long-term solution. Just curious what path you ended up taking.





Link to comment
Share on other sites

@Efficacy IO Hi there,


I actually never went any further with this, the plan was to just run it clientside and upload the frames to a server to stitch with ffmpeg, or as you say dump them server side in Node.


You could take  look at https://github.com/Automattic/node-canvas


Other than that sorry man, did not get that far :(


Good luck!

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