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.
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>
This animated svg uses the data-scroll-activate
attribute to designate that it should play when it first enters the viewport.
Hit the Sweet Spot. Our golf polos stretch, dry fast, and they’re 25% lighter than cotton.
Shop Golf polosThis animated svg uses the data-scroll-deactivate
attribute to designate that it should replay when it re-enters the viewport.
Hit the Sweet Spot. Our golf polos stretch, dry fast, and they’re 25% lighter than cotton.
Shop Golf polosThere'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.
Hit the Sweet Spot. Our golf polos stretch, dry fast, and they’re 25% lighter than cotton.
Shop golf polosNew Arrivals. Finish Summer Strong. The Georges Family: Beach Goers & Good-Lifers. Kelly & Caitlin are vineyard vines teammates... and sisters!
Shop New ArrivalsDon't worry, be chappy.
Shop SwimBring Summer Back To School.
Shop Back To SchoolAnd the animated slide is slide 2.
New Arrivals. Finish Summer Strong. The Georges Family: Beach Goers & Good-Lifers. Kelly & Caitlin are vineyard vines teammates... and sisters!
Shop New ArrivalsHit the Sweet Spot. Our golf polos stretch, dry fast, and they’re 25% lighter than cotton.
Shop golf polosDon't worry, be chappy.
Shop SwimBring Summer Back To School.
Shop Back To SchoolThis example has a data-scroll-deactivate
attribute to specify that the animation should replay when it is reshown after scroll or resize.
Hit the Sweet Spot. Our golf polos stretch, dry fast, and they’re 25% lighter than cotton.
Shop golf polosNew Arrivals. Finish Summer Strong. The Georges Family: Beach Goers & Good-Lifers. Kelly & Caitlin are vineyard vines teammates... and sisters!
Shop New ArrivalsDon't worry, be chappy.
Shop SwimBring Summer Back To School.
Shop Back To SchoolHit the Sweet Spot. Our golf polos stretch, dry fast, and they’re 25% lighter than cotton.
Shop golf polosNew Arrivals. Finish Summer Strong. The Georges Family: Beach Goers & Good-Lifers. Kelly & Caitlin are vineyard vines teammates... and sisters!
Shop New ArrivalsDon't worry, be chappy.
Shop SwimBring Summer Back To School.
Shop Back To School