Keywords (v2.x)

Enter

The enter keyword controls the vector origin (direction) of your animation.

<!-- Reveal with a downward motion -->
<div data-sr='enter top'> Foo </div>

<!-- The other accepted values... -->
<div data-sr='enter left'> Bar </div>
<div data-sr='enter right'> Bun </div>
<div data-sr='enter bottom'> Baz </div>

Move

The move keyword controls the distance (in pixels) traveled during animation.

<div data-sr='move 24px'> Foo </div>

Over

The over keyword sets the duration (in seconds) of your animation.

<div data-sr='over 0.6s'> Foo </div>
<div data-sr='over 1.3s'> Bar </div>

Flip

The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).

<div data-sr='flip 45deg'> Foo </div>
<div data-sr='flip -90deg'> Bar </div>

Spin

The spin keyword is a rotation keyword, controlling rotation along the Y axis (yaw).

<div data-sr='spin 180deg'> Foo </div>
<div data-sr='spin -30deg'> Bar </div>

Roll

The roll keyword is a rotation keyword, controlling rotation along the Z axis (roll).

<div data-sr='roll 15deg'> Foo </div>
<div data-sr='roll -45deg'> Bar </div>

Scale

The scale keyword allows you to change your elements size during reveal animations.

<!-- Scales 80% to 100% -->
<div data-sr='scale up 20%'> Foo </div>

<!-- Scales 120% to 100% -->
<div data-sr='scale down 20%'> Bar </div>

Note: Using up and down modifiers will change the scale direction, but are not required. If the modifier is omitted, scale will still work, but the default scale direction (up) will be used for animation.

<!-- Scales 80% to 100% -->
<div data-sr='scale 20%'> Baz </div>

Wait

The wait keyword delays the start of reveal animations.

<div data-sr='wait 0.5s'> Foo </div>

Note: Delay affects animation once by default. You can configure different behavior, such as always delay or only on page load. (See Configuration.)

Reset

The reset keyword controls whether or not reveal animations replay.

<!-- Reveals each time it becomes visible -->
<div data-sr='reset'> Foo </div>

<!-- Reveals only once -->
<div data-sr='no reset'> Bar </div>

View Factor

The vFactor (with supported shorthand vF) keyword controls how much of this element must be within the viewport, before being animated.

<!-- Reveals almost immediately -->
<div data-sr='vFactor 0.1'> Foo </div>

<!-- Reveal late -->
<div data-sr='vFactor 0.8'> Bar </div>

Opacity

The opacity keyword controls the elements starting opacity.

<!-- Element starts half visible -->
<div data-sr='opacity 0.5'> Foo </div>

---

Easing

Both move and scale keywords can be replaced with Easing Keywords for added control.

You can use…

• ease
• ease-in
• ease-in-out
• ease-out
• hustle

<!-- Using easing with move -->
<div data-sr='move 50px'> Foo </div>
<div data-sr='ease-in 50px'> Bar </div>

<!-- Using easing with scale -->
<div data-sr='scale 30%'> Bun </div>
<div data-sr='hustle 30%'> Baz </div>
<div data-sr='ease down 20%'> Boo </div>

Chaining Keywords

You can combine any keywords together to create (and easily manage) dynamic reveal animation effects.

<!-- Can you imagine what this looks like? -->
<div data-sr='wait 0.2s, scale up 30%'> Foo </div>
<div data-sr='wait 0.4s, scale up 25%'> Bar </div>
<div data-sr='wait 0.6s, scale up 20%'> Bun </div>
<div data-sr='wait 0.8s, scale up 15%'> Baz </div>

---

Recommended Next: Configuration →