The Animus animation framework

To make Imagine 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.

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 plugin’s usability and cuts development times.

Let’s see a button animation example. We add the imagine CSS class, then tell Imagine we want it to animate the button using the data-imagine attribute.

<!-- <Button> -->
<a href="#" class="imagine btn btn-primary" data-imagine="scale 0.5">
   Animated Button
</a>
<!-- </Button> -->

<script>
  $(document).ready(function(){
    $(".imagine").imagine()
  });
</script>

What animations properties can I use?

You can use all of your favorite CSS Animations when creating a custom animation for imagine. Here’s a list of the Supported GSAP Animations:

• x
• y
• z
• xPercent
• yPercent
• scale
• scaleX
• scaleY
• scaleZ
• skewX
• skewY
• rotation
• rotationX
• rotationY
• rotationZ
• perspective
• opacity

Usage examples

<div class="imagine" data-imagine="opacity 1 to-middle"></div>

<div class="imagine" data-imagine="rotationX 0.2"></div>
<div class="imagine" data-imagine="rotationY 0..360 from-middle"></div>
<div class="imagine" data-imagine="rotationZ 0.5 to-middle"></div>

<div class="imagine" data-imagine="scale 0.5 up"></div>
<div class="imagine" data-imagine="scaleX 0.3 down"></div>
<div class="imagine" data-imagine="scaleY 1..2"></div>

<div class="imagine" data-imagine="skewX 0.5"></div>
<div class="imagine" data-imagine="skewY 0.2 to-middle"></div>

<div class="imagine" data-imagine="x 200..-200"></div>
<div class="imagine" data-imagine="y 0.2"></div>
<div class="imagine" data-imagine="z -0.2"></div>