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.
Official documentation
For more detailed information and examples, see the official documentation: Animate.css .
On scroll 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/animate.min.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. |