LayerSnap is a script that builds on top of Snap SVG to enable simple declarative SVG builds by editing the SVG markup's attributes. You can even build animations from the Layers palette in Adobe Illustrator!

An SVG illustration can be animated by grouping elements and giving those groups an attribute to specify their transition type, duration, and delay.

How-To

Include SnapSVG.js, layersnap.js, and the layersnap.css in your page.

Next, add some SVG markup inline in the body of your HTML, wrapped in a <div class="layersnap"></div>. To specify that a portion of your svg markup should animate, group it in a g element (the g element must be a direct child of the svg element) and configure its animation via the g element's data-layersnap-group attribute value. For example, data-layersnap-group="fade" will cause that g element to fade in when the animation plays.

<div class="layersnap" id="mysvg">
  <svg>
    <g data-layersnap-group="fade">...</g>
  </svg>
</div>

To animate the svg, call the Layersnap() function, passing a reference to your svg's wrapper div:

<script>
	var mysvg = document.getElementById( "mysvg" );
	new window.Layersnap( mysvg ).init();
</script>

That's it! From there, the layersnap script will play all g element animations within the svg based on their data-layersnap-group attribute configurations. By default, g elements will animate in source order one after the other, but by setting custom delays and durations, you can change the order and timing for richer animations.

Transition Examples

Layersnap includes many pre-built transitions you can specify by name. All transitions start with the element at opacity 0 and end with the element at opacity 1, though most apply other transformations while fading in. Here are the pre-built transitions. The demos in this page are set to auto-play when they scroll into view, and you can click any of them to replay:

Customizing Transitions

Setting Duration

You can set a custom duration on any g element to change it from the default of 800ms. For example, the following example has a g with an data-layersnap-group attribute value of rotate-right duration-5000, to make its animation run for 5 seconds.

Setting Easing

You can set a custom easing on any g element to change it from the default of easeOut. For example, the following example has a g with an data-layersnap-group attribute value of rotate-right easing-bounce. You can use any of the mina easing functions in the snapsvg docs

Setting Amount

You can set a custom amount on any g element to change it from its default. Amount varies depending on the animation type. In rotate transitons, amount reflects degrees (e.g. "360"). For scale transitions, amount reflects the percent you want to scale up or down, like "50". For move transitions, amount reflects a pixel value, like "300". For fade transitions, amount reflects the transparency you'd like the object to fade in from (100 is the default, which is fully transparent). Amount does nothing for enter and anvil animations, which always come from off-screen. The following example has a g with an data-layersnap-group attribute value of rotate-right amount-270.

Setting Delays

You can set a custom delay on any g element to change it from the default, which is just after the prior g finishes its transition. If you set a custom delay, note that it represents the time from the start of the entire animation, so delays can be used to change the order that your groups animate in. For example, the following example has a g with an data-layersnap-group attribute value of rotate-right delay-2000, to make its transition delay for 2 seconds before starting.

Looping transitions

If you want a particular group's animation to loop infinitely, you can add a "loop" to the group ID. For example, a looping "scale-down" animation would be data-layersnap-group="scale-down_loop"

Repeating transitions

If you want a particular group's animation to repeat (in the same direction) infinitely, you can add a "repeat" to the group ID. For example, a repeating "scale-down" animation would be data-layersnap-group="scale-down_repeat"

Settings Configurator

Use this to play with the various settings and see what each does.

Replay Buttons

If you want a button that'll replay the animation on click, give the div wrapper the attribute data-layersnap-replay. Every demo in this page except for the interactive ones has a replay button overlayed on it, with opacity: 0.

	<div class="layersnap" data-layersnap-replay>
	  <svg>
	    <g data-layersnap-group="fade">...</g>
	  </svg>
	</div>
	

Interactive Animations

Animations can interact with other DOM content by changing a group’s data-layersnap-group attribute to include "toggle-" followed by an ID of an element on the page that should be toggled when that group is clicked. Once clicked, a class of "layersnap-toggle-hide" will be added to the associated element, and a class of "layersnap-toggle-active" will be added to the SVG group. By default, all toggles will receive the hide class, so if you'd like to activate a group from the start, add "toggleactive" to that group's ID.

Note that the demo and code below uses a mixture of HTML and SVG so view the source carefully to see how it's assembled. First off, there is layersnap container around everything that has the data-layersnap-interact attribute - this allows for the SVG interactivity. Inside this container, we have the following elements that may need to be customized slightly for each interactive animation:

• An inline style block at the top has simple styles to position the text blocks to the right and a mediaquery to stack them on smaller breakpoints. A CSS rule to set the hover and active state color of the SVG "slice"
• The SVG for the interactive "controller". In this example, they are slices of a circle but thse can be any appearance or layout. For each interactive element in the SVG, add a reference to the div that should display when you click the slice by adding this to the name of the layer: "toggle-[layer-id]". For example, by adding toggle-buy to the buy slice's layer name in Illustrator, it will show the HTML text div with and id of buy when it's clicked. You can also specify the animation type, duration, and delay on these layers - just separate each parameter with a space in your layer name.
• A series of HTML content divs that are swapped out based on what slice is clicked. The IDs of these should map to the naming used in the interactive SVG.

Interaction can work across SVGs as well, so you can have one SVG toggle the visibility of another SVG, and it'll start playing it as well if it's wrapped in the expected layersnap markup. For example:

Fallback Images

To specify a fallback image for non-svg supporting browsers, give the div a background image (this rule will be negated if svg is supported).

	<div class="layersnap" data-layersnap-init style="background-image: url(path/to/fallback.png);">
	  <svg>
	    <g data-layersnap-group="fade">...</g>
	  </svg>
	</div>
	

Creating Custom Named Transitions

To create new custom named transitions, you can extend the Layersnap object's transitions property. Here's an example of a transform transition called move right:

<script>
window.Layersnap.prototype.transitions[ "move-right" ] = function( settings ){
	if( !settings.startEnd ){
		settings.startEnd = [ "translate(-30,0)", "translate(0,0)" ];
	}
	this._transformTransition( settings );
};
</script>

Building Animations in Adobe Illustrator

If you're editing an SVG in Adobe Illustrator, you can group graphics in the Layers palette and name their layer as if you are setting the group's data-layersnap-group attribute (with the transition name, duration, and delay. When you save your SVG, these layers will become `g` elements with ID attributes matching the layer names you created. You can then change the ID attributes to data-layersnap-group attributes so Layersnap recognizes them.

Tips and Caveats

• In order to use the layer naming technique above, you'll need at least 2 layers in the pallete. Unnamed layers will go ignored by the Animation script.
• If more than one layer has the same name, Illustrator will add underscores and other characters to the SVG markup to make its ID unique. It'll still appear the same way in Illustrator however, and the animation engine knows to look for these characters and ignore them.

jQuery Integration

Layersnap does not depend on jQuery, but we've created some handy tie-ins to use it with jQuery if you prefer.

To use Layersnap as a jQuery plugin and bind a few helpful events, include jQuery and the layersnap.jquery.init.js file. This file includes functions to create a $.fn.layersnap() method you can use on any jQuery object, plus event listeners to cue up layersnap animations when the enhance and inviewport events fire on layersnap elements.

To have an animation play when the page loads, give the div wrapper the attribute data-layersnap-init, and trigger an "enhance" event when the DOM is ready.

	<div class="layersnap" data-layersnap-init>
		<svg>
			<g data-layersnap-group="fade">...</g>
		</svg>
	</div>
	

	<script>
	jQuery( function(){
		jQuery( document ).trigger( "enhance" );
	});
	</script>

Delaying Start Time for when the graphic is visible (with Porthole)

If you include Porthole in your page, you can have an animation start when it scrolls into the viewport. All of the animations in this page use Porthole to do just that.

With porthole included, to have the animation play once when it scrolls into the viewport, give the layersnap div wrapper a data-scroll-activate attribute.

	<div class="layersnap" data-scroll-activate>
	  <svg>
	    <g data-layersnap-group="fade">...</g>
	  </svg>
	</div>
	

To make it replay every time it enters the viewport, also add the attribute data-scroll-deactivate.

	<div class="layersnap " data-scroll-activate data-scroll-deactivate>
	  <svg>
	    <g data-layersnap-group="fade">...</g>
	  </svg>
	</div>