Scalable Vector Graphics (SVG) is a powerful tool in the web developer’s arsenal.
But web creators have been rather limited by how they can create and manipulate this content.
Great designers, animators and motion graphics artists have long relied on timeline based animation tools to create dynamic rich animations.
Flash Professional CC (now Adobe Animate CC) allows Custom Platforom Plugins, meaning developers can write plug-ins for the application that generates content in any format.
Since it’s such a powerful timeline based vector animation tool it seemed like a perfect opportunity to innovate the SVG animation workflow.
Snap.SVG Animator allows you to create special documents at launch and then simply build out your animation as you would normally.
Upon publishing the application launches an HTML page utilizing Snap.SVG as well as our special runtime which parses the timeline data from flash and draws and animates your SVG content.
You can get the plugin through the Adobe Add-ons Portal which will install it directly into your application through the Creative Cloud.
The project is also open source on github where anyone can submit comments, bugs or contribute to make it better.
It’s actively being worked on and there are some exciting updates on the horizon including scripting support.
I believe this kind of animation workflow is inevitable and is a glimpse at the future of how great animated SVG content will be created for the web.
Check out the video above for a basic walkthrough.