You can animate SVGs in the VV codebase to make attractive build transitions whenever a graphic enters the screen. The tools driving these SVG animations are called Layersnap and Porthole, and they are designed to let you configure animations from markup, or even in Adobe Illustrator, rather than JavaScript.

For an in-depth overview of how to use Layersnap in VV, see LayerSnap SVG Animation.

Markup & attributes

Generally, an animated SVG needs a div wrapped around it with a class of layersnap. This class will tell the JavaScript to look at the child SVG for animation instructions.

<div class="layersnap">[svg code here]</div>

To start playing an animation as soon as it enters the viewport, add a data-scroll-activate attribute to the div.

<div data-scroll-activate class="layersnap">[svg code here]</div>

To replay an animation whenever it enters the viewport, add a data-scroll-deactivate attribute to the div.

<div data-scroll-activate data-scroll-deactivate class="layersnap">[svg code here]</div>

Inside the layersnap div, you'll need an SVG element with a viewBox attribute describing its size, and a series of one or more child g elements containing groups of SVG artwork.

<div data-scroll-activate class="layersnap">
	<svg viewBox="0 0 247 169">
		<g>...grouped artwork here...</g>
		<g>...grouped artwork here...</g>
		<g>...grouped artwork here...</g>
		<g>...grouped artwork here...</g>
	</svg>
</div>

Each of the g elements can have a data-name attribute with a value to specify a custom build animation. For example, the following markup will animate the elements in the order they appear with default timing, one after another, using the pop, fade, scale-down, and scale-up transitions:

<div data-scroll-activate class="layersnap">
	<svg viewBox="0 0 247 169">
		<g data-name="pop">...grouped artwork here...</g>
		<g data-name="fade">...grouped artwork here...</g>
		<g data-name="scale-down">...grouped artwork here...</g>
		<g data-name="scale-up">...grouped artwork here...</g>
	</svg>
</div>

To further customize build transitions, there is a syntax for specifying settings in the data-name attribute: key/value pairs are separated by a "_", while the keys and values themselves are only separated by dashes. Here's an example of a build that uses the delay setting to start each group animation in a specific duration after the whole graphic begins to play.

<div data-scroll-activate class="layersnap">
	<svg viewBox="0 0 247 169">
		<g data-name="pop_delay-1500">...grouped artwork here...</g>
		<g data-name="fade_delay-1000">...grouped artwork here...</g>
		<g data-name="scale-down_delay-500">...grouped artwork here...</g>
		<g data-name="scale-up_delay-0">...grouped artwork here...</g>
	</svg>
</div>

To ensure accessibility, lead with an accessible label that includes the text content of the svg graphic (p class="a11y-only"). If the SVG is linked, add another label for the call-to-action (span class="a11y-only"). Then, give the layersnap element role="presentation" and aria-hidden attributes, to effectively hide it from assistive technology.

<p class="a11y-only">Hit The Sweet Spot. Our golf polos stretch, dry fast, and they're 25% lighter than cotton.</p>
<a href="http://www.vineyardvines.com/men-golf/">
	<span class="a11y-only">Shop golf polos</span>
	<div data-scroll-activate class="layersnap" role="presentation" aria-hidden="true">
		<svg viewBox="0 0 247 169">
			<g data-name="pop_delay-1500">...grouped artwork here...</g>
			<g data-name="fade_delay-1000">...grouped artwork here...</g>
			<g data-name="scale-down_delay-500">...grouped artwork here...</g>
			<g data-name="scale-up_delay-0">...grouped artwork here...</g>
		</svg>
	</div>
</a>

Examples

Basic animated svg

This animated svg uses the data-scroll-activate attribute to designate that it should play when it first enters the viewport.

Animated svg with replay

This animated svg uses the data-scroll-deactivate attribute to designate that it should replay when it re-enters the viewport.

Marketing module inside of a carousel (with a dependent image load attribute).

There's nothing particular to the carousel that needs to change to accommodate a slide with animated SVG.

This demo uses an attribute to delay the animation from playing until an associated image has loaded. Note that for this to work, the associated image needs an ID ("marketingmod-img-1" in this case). Then the layersnap div can reference that ID with a data-activate-onload="marketingmod-img-1". Currently, the animation will replay whenever the parent slide is shown.

Same as above, without autoplay

And the animated slide is slide 2.

Marketing module inside a carousel that replays when it re-enters the viewport

This example has a data-scroll-deactivate attribute to specify that the animation should replay when it is reshown after scroll or resize.

Same as above, but with a fade transition.