The Animus animation framework

To make reveal as simple as possible, we created the Animus Animation Framework. Animus generates GSAP animation objects using human readable syntax, making everything really easy to use and animate, without having to rely on preset animation classes, like the other scroll reveal plugins do.

The animation syntax is the following:

<div data-reveal="animation-name {value}, duration {value}, easing {value}"></div>

Creating animation classes takes up a lot of time and they might not always be what you expect them to be like, that’s why Animus enhances slider usability and cuts development times. Here’s an example for an animated bootstrap button:

<a href="http://pixevil.com" class="btn btn-primary"
   data-reveal="opacity 0"
   data-reveal-at1000="rotationY 45, scale 0.5 duration 1000, easing spring"
   data-reveal-at2000="rotationY 0, scale 1, opacity 1, duration 1000, easing easeInOutQuad"
   data-reveal-loop="true">
   Animated Button
</a>

Animated Button

What animations properties can I use?

You can use all of your favorite CSS Animations when creating a custom animation for reveal. Here’s a list of the Supported GSAP Animations including margin, padding, border, box shadow, color and even background color.

For the parameters written in bold, reveal will provide a default value automatically. For the parameters which aren’t written in bold, you will need to be reinitialize them manually in the initial and in states, because reveal will not keep track of custom CSS values.

• x
• y
• z
• scale
• scaleX
• scaleY
• scaleZ
• skewX
• skewY
• rotation
• rotationX
• rotationY
• rotationZ
• perspective
• xPercent
• yPercent
• shortRotation
• shortRotationX
• shortRotationY
• shortRotationZ
• transformOrigin
• svgOrigin
• transformPerspective
• directionalRotation
• parseTransform
• force3D
• skewType
• smoothOrigin
• boxShadow
• borderRadius
• backgroundPosition
• backgroundSize
• perspectiveOrigin
• transformStyle
• backfaceVisibility
• userSelect
• margin
• padding
• color
• clip
• textShadow
• autoRound
• strictUnits
• border
• borderWidth
• float
• cssFloat
• styleFloat
• perspectiveOrigin
• transformStyle
• backfaceVisibility
• userSelect
• opacity
• alpha
• autoAlpha
• className
• clearProp

Usage examples

<div data-reveal="x 100"></div>

<div data-reveal="y 100%"></div>

<div data-reveal="z -300"></div>

<div data-reveal="opacity 0.5"></div>

<div data-reveal="rotationX 360"></div>

<div data-reveal="rotationY 45"></div>

<div data-reveal="rotationZ -30"></div>

<div data-reveal="scale 2"></div>

<div data-reveal="scaleX 200%"></div>

<div data-reveal="skewX 100%"></div>

<div data-reveal="skewY 60%"></div>

<div data-reveal="background #000000"
     data-reveal-at1000="background #ffffff"></div>