Export to animated GIF, MP4 or MOV

[swampthang 112 Likes (Specialist)]

I'm working on a project where we are creating a tool as a sort of helper app that we can use to create an animation using HTML5/JS GSAP (not Flash version) and then export the animation with transparency for use on the web as a standalone file such as animated GIF, MOV or MP4 as a transparent layer in a video editing program.

 

The animation tool will focus on the goodies from the DrawSVG, MorphSVG and SplitText plugins. So, obviously we would chain together a bunch of GSAP scripts and then try to capture the completed animation playing inside a specific container using some sort of rendering process that gets converted into the above mentioned filetypes. 

 

Does anyone know of a way to accomplish this? I am working in a Node.js environment so will have all that's possible in Node available to me including file system access. I am hoping someone has already created an export tool that can be plugged in to our helper application.

 

Thanks in advance!

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

I'm not familiar with a technique for doing this. It's certainly not something built into GSAP. I imagine with Node and some other server-side technology it is within the realm of possibility. My guess is that stackoverflow would be a good place to ask.

 

I know that CodePen uses PhantomJS for generating static screen captures of web pages: http://phantomjs.org/related-projects.html

 

 

 

If you get any good results we would love to hear about them.

[Carl 9,066 Likes (Superhero)]

Also, I'm quite sure that a number of online services that provide cross-browser testing provide videos of how your site looks in different browsers (like: https://testingbot.com/features) so I have to imagine there is info out there on how to do it.

[swampthang 112 Likes (Specialist)]

Thanks, Carl. I'm writing this as an electron application (from the github folks) - in case others are interested in seeing this quest chronicled, I have been looking at these 2 options:

 

Electron Recorder

CCapture.js

 

CCapture is a canvas-based library so, of course, would require canvas but not sure yet if Electron Recorder would allow recording from a specific application. Will keep this updated as I go and hopefully find a good solution.

[swampthang 112 Likes (Specialist)]

Found this nice write-up of some options. Still hunting for the best solution.

https://github.com/veltman/gifs

[swampthang 112 Likes (Specialist)]

This is proving to be a real challenge to do it right. Any guidance from someone who has any experience at this sort of thing would be greatly appreciated. Would be awesome to figure out a way to export to some sort of plugin that could run in a video track preserving the GSAP code. How cool would that be! 

[OSUblake 9,990 Likes (Superhero)]

For anybody else, I posted something related in this thread.

http://greensock.com/forums/topic/14620-tweenmaxset-drawsvg0-in-nodejs-not-working/?p=62473

 

Demo showing how to convert animation frames to images.

See the Pen 336e66d9806eb5c10158083ee27cacd8?editors=0010 by osublake (@osublake) on CodePen

[Carl 9,066 Likes (Superhero)]

Great SVG demo, Blake. Thanks!

[JoeSan 0 Likes (Newbie)]

Through imagemagic you can create the GIF. You can sequence the images and their timing. No idea how this can be used in the web.

This site  http://html5animationtogif.com is providing online creation of GIF from HTML5 animation.  May they are using back end tool to create animated GIF from HTML5.

 

[jessegavin 9 Likes (Newbie)]

This is something I am also interested in figuring out.

 

Google recently released Puppeteer, a node.js wrapper for headless Chrome. One of the primary use cases provided is screen capture.

 

Here's a Github discussion specifically about video capture.