Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

Export to animated GIF, MP4 or MOV

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

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!

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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! 

Link to comment
Share on other sites

Great SVG demo, Blake. Thanks!

Link to comment
Share on other sites

  • 1 year later...

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.

 

Link to comment
Share on other sites

  • 2 months later...

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.

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

×