Jump to content


Exporting Flash/Animate animation to SVG

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

Hello all, a newbie here.


I looked through the docs and examples, but am still a bit unsure whether the Timeline scripts could help me out with a project I'm tasked with.


The project is a rather straightforward animation created in Flash/Animate which needs to be exported as SVG. The animation has four points at which the animation would need to stop. Each 'stop point' would have a corresponding button which moves the playhead backwards or forwards, depending if the clicked button is before or after where the playhead currently is at.


As you might know, scripts do not go with the SVG when exporting it from Animate and so the solution would be to apply JavaScript or some such library to handle not only the navigation, but stopping the playhead at the 'stop points' or labels.


Here are my initial questions/problems:


* Using the TimelineLite/Max one can sequence tweens into a single timeline, but is it possible to add a single SVG animation (exported from Animate) that can be controlled with TimelineLite/Max?


* Are the 'stop points' possible to implement with, say, applying labels at certain points (e.g. in seconds)?


Please let me know if something needs clarification.


Thanks in advance!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


For Animate CC's canvas export we have an EaselPlugin that can allow you to tween to any frame number or framelLabel of any MovieClip.

And those tweens can certainly go in a timeline.


There is a demo in this post: http://greensock.com/forums/topic/14997-tween-till-certain-label-inside-a-frame-to-frame-animation/?p=64590


docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/EaselPlugin/


From our understanding Animate's SVG export has very limited (if any) support for scripting so at this point none of our tools have been developed to work with that. 

Link to comment
Share on other sites

Hi and thanks for the reply as well as the welcome!


With the Canvas export, one can script interactivity with JavaScript from Animate CC so that alone might be enough to achieve what I'm after. That being said, additional plugin sure is helpful!


That being said, I'm not sure whether Canvas is an option (will know tomorrow). If exported SVG cannot be tied to the Timeline scripts, then it simply is out of the question.


Again, thank you! I gotta say, GSAP is very impressive from what I've seen so far, well done!

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.