LayerSnap! Markup-based SVG Animations

Posted by Scott on 02/03/2017

"Layersnap logo branding screenshot"

Every so often we come across parts of our designs that could really benefit from a smooth build animation or transition. Fortunately, we use a lot of SVG for delivering our vector graphics, so we have a great deal of animation flexibility at our disposal, and one tool we've enjoyed using for helping us animate our SVGs is SnapSVG, by Adobe. Snap is great, but takes a decent amount of JavaScript skill and tinkering to churn out an animation.

While working on some projects last year, we realized that if we had a more user-friendly, markup-based approach to configuring our SVG animations, we'd be more productive, and our clients could easily work with their own animations after hand-off as well. So we built an open-source tool!

Introducing LayerSnap

LayerSnap is a script that builds on top of Snap SVG to build simple SVG animations by editing the SVG markup's attributes. It comes with a suite of pre-set build transitions like "fade", "move-down", "enter-left", "rotate-right", etc. It also has an "anvil" transition, because no animation toolkit is complete without an anvil transition. These transitions can be configured via an attribute on every group (g) element in an SVG, and a special syntax allows you to combine each transition with a host of configuration settings for their speed, delay, easing, looping, repeating, and even interactivity.

Demos, Docs, and more

This is our initial release of LayerSnap, so we expect it'll have some issues here and there to work out. We'd love your help in testing it out. LayerSnap has a couple of dependencies (a CSS file and Snap SVG's JavaScript), but you'll notice our project demos include jQuery and some other utilities for cueing animations when they enter the viewport as you scroll. jQuery isn't required by LayerSnap, but if you're already using it in your project, you'll find a helper script or two in the LayerSnap repo makes it easier to auto-run your animations.

Have any thoughts on LayerSnap? Please let us know over on twitter! Enjoy!