Animation Library

For all things in motion!

ProTip:

animateIn

classes must be present on bootstrap columns.

animateBlock

class must wrap content you wish to have use advanced animation and be a child of the

animateIn

div.

Animation

Add to head section:

<link rel="stylesheet" href="/assets/shared/CustomHTMLFiles/animation.css">

Add to body bottom section:

<script src="/assets/shared/CustomHTMLFiles/animation.js"></script>

Add to inspector console to test animation timing:

var visualTrigger = winHeight * .7 + winScrollTop;
$('body').append('<div style="position: fixed; color: blue; width: 100%; border-bottom: 1px solid rgba(127,127,127,0.4); right: 0; top: ' + visualTrigger + 'px;">Trigger: ' + visualTrigger + "px" + '</div>');

Animate Up

animateIn-up

basic

animateIn-up > animateBlock

advanced

Animate Up

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi qui, quod ab? Maiores dolorem ducimus ea pariatur ipsum iure, sapiente error consequatur itaque quo, nulla ipsa nesciunt corporis, atque minus.

animateIn-up-fast

basic

animateIn-up-fast > animateBlock

advanced

Animate Up Fast

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero fuga cupiditate illo eum, similique maxime, veniam quibusdam reiciendis voluptate, quia a alias minus? Molestias delectus asperiores sapiente consequuntur a fugiat!

animateIn-up-slow

basic

animateIn-up-slow > animateBlock

advanced

Animate Up Slow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere ducimus harum animi inventore pariatur? Odit iure modi ullam quaerat inventore! Maiores vitae quo veritatis, beatae sint sed explicabo non! Eligendi.

Animate Down

animateIn-down

basic

animateIn-down > animateBlock

advanced

Animate Down

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non maiores, sit quibusdam commodi cumque mollitia, cum ullam error et dicta blanditiis, quo unde corporis, ab iure praesentium voluptatum explicabo laudantium.

animateIn-down-fast

basic

animateIn-down-fast > animateBlock

advanced

Animate Down Fast

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, repellendus enim ratione quo doloribus saepe labore vero quos, veritatis iste nisi. Natus quia ipsum fugiat modi, qui dignissimos officiis praesentium.

animateIn-down-slow

basic

animateIn-down-slow > animateBlock

advanced

Animate Down Slow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis eaque tempora aliquam cupiditate qui doloremque possimus laboriosam ad modi, voluptate quas, voluptatem ex, quis cum explicabo optio. Eaque, rerum voluptatibus?

Animate Left

animateIn-left

basic

animateIn-left > animateBlock

advanced

Animate Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, ex beatae ducimus obcaecati alias fugiat magnam dolorum veniam et earum, illo cumque ratione maiores voluptatum quia nihil rem voluptate sapiente!

animateIn-left-fast

basic

animateIn-left-fast > animateBlock

advanced

Animate Left Fast

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error repellat, aspernatur ab provident perferendis neque veniam ipsum ex! Sint illo impedit, aspernatur tenetur iusto error! Delectus asperiores rerum voluptatibus, laboriosam.

animateIn-left-slow

basic

animateIn-left-slow > animateBlock

advanced

Animate Left Slow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ipsa in blanditiis, unde dolores placeat eos magnam fugit cum magni. Ab cupiditate quos commodi exercitationem vel unde, veniam sequi et.

Animate Right

animateIn-right

basic

animateIn-right > animateBlock

advanced

Animate Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ad earum atque laboriosam qui necessitatibus autem cumque in debitis sequi error, assumenda corporis, recusandae rerum, dolore nihil. Eos, quae, asperiores.

animateIn-right-fast

basic

animateIn-right-fast > animateBlock

advanced

Animate Right Fast

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dolore, suscipit eligendi earum doloremque dolorum perspiciatis! Fugiat distinctio, quaerat, repellendus eum, repudiandae modi quia soluta perspiciatis veniam quos cumque qui!

animateIn-right-slow

basic

animateIn-right-slow > animateBlock

advanced

Animate Right Slow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui modi libero corporis ullam perspiciatis recusandae eveniet voluptatem culpa sunt et! Labore soluta quas sint voluptas, iure, eaque nesciunt sunt corrupti!

Animate Fade

fadeIn

toggle

Animate Fade

fadeIn-fast

toggle

Animate Fade Fast

fadeIn-slow

toggle

Animate Fade Slow

Animate Zoom

zoomIn

toggle

Animate Zoom

zoomIn-fast

toggle

Animate Zoom Fast

zoomIn-slow

toggle

Animate Zoom Slow

Parallax

<section class="parallax">content...</section>