Let’s see some magic

Parallax animations are very well known for backgrounds which follow the page as the user scrolls down. Imagine goes beyond that. You’re not limited to simple animations.

You can animate opacity, rotation, scale, skew and change x, y, z positions, combined.

To setup the animation like above we’ll need to update the initialization script that we added in the previous part as follows:

<!-- Initialization Script -->
<script>
$(document).ready(function(){
  $('.imagine').imagine({
    animation: "scale 0.5, rotationZ 0.2"
  });
});
</script>

What animations can I use?

Unlimited animations, anything you can imagine. You can read about what amazing animations you can create with imagine in the custom animations article, which we’ll also cover later in the documentation.