One of the plugins we have included inside Raleway is animate.css, an awesome cross-browser animation plugin that is extremely easy to use. And also offers around 50 animations you can play with on any element.
To add an animation to an element (anything) simply add the class .animationName-animated all classes are listed below, for example: <h4 class="fadeInLeft-animated">Example</h4>
Check out the usage page for more features and the cheatsheet to see all of available animations in action:
Another animation plugin which we include in Raleway is scrollReveal.js, which is used for a simple way to create and maintain how elements fade in, triggered when they enter the viewport. It is also extremely easy to use, everything is done just inside the HTML markup like animate.css awesome right!
By adding a data-sr attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport:
<!-- Reveal using defaults. -->
<div data-sr>Hello world!</div>
But wait! It’s more fun if you define your own reveal animation parameters, which you can do using using natural, declarative language:
<!-- Reveal using custom parameters. -->
<div data-sr="enter left and move 50px over 1.33s"> Foo </div>
<div data-sr="enter from the bottom after 1s"> Bar </div>
<div data-sr="wait 2.5s and then ease-in-out 100px"> Baz </div>
These plugins are used all over the "Pages" of this template, browse around there, you will see some awesome animations in action. Or check out the preview pages linked above :)