Animations
A cross-browser library of CSS and JavaScript animations.
Animate.css
animate.css
is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Usage
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="assets/vendor/animate.css">
Add the class .animated
to the element you want to animate.
Infinity
You may also want to include the class .infinite
for an infinite loop
Animation classes
Add one of the following animation classes:
Class names | |||
---|---|---|---|
.bounce |
.flash |
.pulse |
.rubberBand |
.shake |
.headShake |
.swing |
.tada |
.wobble |
.jello |
.bounceIn |
.bounceInDown |
.bounceInLeft |
.bounceInRight |
.bounceInUp |
.bounceOut |
.bounceOutDown |
.bounceOutLeft |
.bounceOutRight |
.bounceOutUp |
.fadeIn |
.fadeInDown |
.fadeInDownBig |
.fadeInLeft |
.fadeInLeftBig |
.fadeInRight |
.fadeInRightBig |
.fadeInUp |
.fadeInUpBig |
.fadeOut |
.fadeOutDown |
.fadeOutDownBig |
.fadeOutLeft |
.fadeOutLeftBig |
.fadeOutRight |
.fadeOutRightBig |
.fadeOutUp |
.fadeOutUpBig |
.flipInX |
.flipInY |
.flipOutX |
.flipOutY |
.lightSpeedIn |
.lightSpeedOut |
.rotateIn |
.rotateInDownLeft |
.rotateInDownRight |
.rotateInUpLeft |
.rotateInUpRight |
.rotateOut |
.rotateOutDownLeft |
.rotateOutDownRight |
.rotateOutUpLeft |
.rotateOutUpRight |
.hinge |
.jackInTheBox |
.rollIn |
.rollOut |
.zoomIn |
.zoomInDown |
.zoomInLeft |
.zoomInRight |
.zoomInUp |
.zoomOut |
.zoomOutDown |
.zoomOutLeft |
.zoomOutRight |
.zoomOutUp |
.slideInDown |
.slideInLeft |
.slideInRight |
.slideInUp |
Customize
You can change the duration of your animations, add a delay or change the number of times that it plays:
#yourElement {
-vendor-animation-duration:: 3s;
-vendor-animation-delay:: 2s;
-vendor-animation-iteration-count:: infinite;
}
onScroll Animation
hs.onscroll-animation.js
plugin allows you to animate objects by triggering .u-in-viewport
class, as you scroll down to it.
How to use?
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="assets/vendor/animate.css">
Copy-paste the following <script>
s near the end of your pages under JS Implementing Plugins to enable it.
<script src="assets/vendor/appear.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of animation
$.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
});
</script>
Basic example
<h1 class=""
data-animation="fadeInUp"
data-animation-delay="800"
data-animation-duration="1500">FadeIn</h1>
Examples
Objects
bounds: -100 - integer
debounce: 50 - integer
inViewportClass: 'u-in-viewport' - string
animation: 'fadeInUp' - string
animationOut: false - boolean
animationDelay: 0 - integer
animationDuration: 1000 - integer
Callbacks
afterShow: function(){} - function
onShown: function(){} - function
onHidden: function(){} - function
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-in-viewport-class=""
.
Attribute | Description | Example value | Default value |
---|---|---|---|
|
The class that triggers the plugin when you reach the viewport. | u-animated | u-in-viewport |
|
Effect of appearance. All available animation classes can be found via animate.css. | fadeIn | fadeInUp |
|
Delay of animation (ms) that indicates when animation will start after the element hits the viewport. | 1000 | 0 |
|
Duration of animation (ms). | 500 | 1000 |
|
Executes the code inside the body of the function each time it appears. | ||
|
Executes the code inside the body of the function each time it is shown. | ||
|
Executes the code inside the body of the function each time it is hidden. |