Export to animated GIF, MP4 or MOV

[swampthang]

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]

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]

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]

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]

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

https://github.com/veltman/gifs

[swampthang]

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]

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]

Great SVG demo, Blake. Thanks!

[JoeSan]

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]

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.

[tresorama]

Any news on these kind of preojects in these years ?
I'm considering learnig some motion graphic as video format but I find more intuitive scripting animation with gsap rather than Adobe After Effects.

[testbed]

Wanted to add some info here, as I just worked through this scenario and it was tricky. 
This is the workflow I used:

1. Created SVG animation
2. Rendered each frame to image (PNG) onUpdate, and push to an array. You could probs use the code above by @OSUblake to do that.
3. At the end of the SVG animation, replayed the animation by rendering each PNG to a canvas element. I used the Mozilla example here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#understanding_source_element_size
   You could probably do this in realtime onUpdate to a hidden or offscreen canvas element. Maybe I'll try that next. 
4. Used MP4-muxer library to record the canvas to an MP4. There's a great demo on their github that I lifted most of the code from. https://github.com/Vanilagy/mp4-muxer

There's probably a more efficient, elegant and performant way to do all this but it works! Hope it helps someone.