I have spent a lot of time this past year working with SVG animation primarily with SnapSVG. I have grown to really enjoy the library and have relied on it heavily in some projects. However, getting your head around some of the animation potential could be a bit overwhelming even for simple tasks such as loops and path animations. This is partially what motivated me to write SnapFoo, an open source JavaScript library that extends off of SnapSVG to help simplify the SVG animation process.

SnapFoo on Github

SnapFoo leverages SnapSVG to handle the internals of the animations and sequencing. My goal was to simplify that learning curve getting into those functions. Working with SVG animation a lot I found I always needed loops, path animations, and sequences and I know I can't be the only one. Using SnapFoo, you're able to define your SVG container, quickly call .animate or .animatePath, pass in your element selectors and animation options, such as loops, sequence frames, or callbacks, and be up and running. It does require some experience with SnapSVG in regards to how transform strings are formatted.

There are certainly areas that can be improved and features that can be added but for a 1.0 release, I am very happy with its stability and functionality. I'm very proud of this library and am very excited at the potential of having others contribute to the project to really take it further.

This has been my first crack at releasing an open source project like this and am very excited at the potential to improve upon SnapFoo. Writing this has forced me to think a little differently with how I write code and has been such an exciting learning experience already. Then seeing it used successfully in production is an unreal feeling. Here's to continued progress toward a 2.0 release.


2,552 3 23