Animation

Scroll trigger

Triggered headline

Lorem ipsum triggered paragraph.

<div data-scroll class="vecora">
  <h1 class="vecora animate left">Triggered headline</h1>
  <p class="vecora animate right delay">Lorem ipsum triggered paragraph.</p>
</div>

<div data-scroll class="vecora">
  <div class="logo logo--huge logo--center vecora animate center"></div>
</div>

Delay

Class	Length
`short-delay`	100ms
`shorter-delay`	250ms
`delay`	500ms
`longer-delay`	1s
`long-delay`	2s

All these classes can be follow by an integer delay-*. The delay will then be 500ms × integer. This is useful to trigger a series of animations one after another.

Travel distance

Class	Distance
`short-distance`	24px
`shorter-distance`	48px
no class	96px
`longer-distance`	256px
`long-distance`	512px

SVG animation

[ CSS-Tricks’ A Guide to SVG Animations (SMIL) ]

[ Snap.svg ]