The Animus animation framework

To make Slidea 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 most sliders do.

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.

Let’s see a button animation example. We add the slidea-object CSS class to tell Slidea we want it to animate the button, then we add the animation syntax.

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

What animations properties can I use?

You can use all of your favorite CSS Animations when creating a custom animation for slidea. 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, slidea 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 slidea 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 class="slidea-object"
   data-slidea-at1000="x 100">
</div>

<div class="slidea-object"
   data-slidea-at1000="y 100%">
</div>

<div class="slidea-object"
   data-slidea-at1000="z -300">
</div>

<div class="slidea-object"
   data-slidea-at1000="opacity 0.5">
</div>

<div class="slidea-object"
   data-slidea-at1000="rotationX 360">
</div>

<div class="slidea-object"
   data-slidea-at1000="rotationY 45">
</div>

<div class="slidea-object"
   data-slidea-at1000="rotationZ -30">
</div>

<div class="slidea-object"
   data-slidea-at1000="scale 2">
</div>

<div class="slidea-object"
   data-slidea-at1000="scaleX 200%">
</div>

<div class="slidea-object"
   data-slidea-at1000="skewX 100%">
</div>

<div class="slidea-object"
   data-slidea-at1000="skewY 60%">
</div>

<div class="slidea-object"
     data-slidea="perspective 0"
     data-slidea-at1000="perspective 800">
</div>