Skip to main content

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

Usage Example

            
              <h1 class="animated infinite bounce">Example</h1>
            
          

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

.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

JavaScript behavior

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

data-in-viewport-class

The class that triggers the plugin when you reach the viewport. u-animated u-in-viewport

data-animation

Effect of appearance. All available animation classes can be found via animate.css. fadeIn fadeInUp

data-animation-delay

Delay of animation (ms) that indicates when animation will start after the element hits the viewport. 1000 0

data-animation-duration

Duration of animation (ms). 500 1000

afterShow: function (invoker) {}

Executes the code inside the body of the function each time it appears.

onShown: function (invoker) {}

Executes the code inside the body of the function each time it is shown.

onHidden: function (invoker) {}

Executes the code inside the body of the function each time it is hidden.