Animsition

A simple and easy jQuery plugin for CSS animated page transitions.

Download on GitHub

58 different animations

Fade

  • fade-in
  • fade-out

Fade Demo

Fade up

  • fade-in-up-sm
  • fade-in-up
  • fade-in-up-lg
  • fade-out-up-sm
  • fade-out-up
  • fade-out-up-lg

Fade Up Demo

Fade down

  • fade-in-down-sm
  • fade-in-down
  • fade-in-down-lg
  • fade-out-down-sm
  • fade-out-down
  • fade-out-down-lg

Fade Down Demo

Fade left

  • fade-in-left-sm
  • fade-in-left
  • fade-in-left-lg
  • fade-out-left-sm
  • fade-out-left
  • fade-out-left-lg

Fade Left Demo

Fade right

  • fade-in-right-sm
  • fade-in-right
  • fade-in-right-lg
  • fade-out-right-sm
  • fade-out-right
  • fade-out-right-lg

Fade Right Demo

Rotate

  • rotate-in-sm
  • rotate-in
  • rotate-in-lg
  • rotate-out-sm
  • rotate-out
  • rotate-out-lg

Rotate Demo

Flip X

  • flip-in-x-fr
  • flip-in-x
  • flip-in-x-nr
  • flip-out-x-fr
  • flip-out-x
  • flip-out-x-nr

Flip X Demo

Flip Y

  • flip-in-y-fr
  • flip-in-y
  • flip-in-y-nr
  • flip-out-y-fr
  • flip-out-y
  • flip-out-y-nr

Flip Y Demo

Zoom

  • zoom-in-sm
  • zoom-in
  • zoom-in-lg
  • zoom-out-sm
  • zoom-out
  • zoom-out-lg

Zoom Demo

Overlay Option

  • overlay-slide-in-top
  • overlay-slide-out-top
  • overlay-slide-in-bottom
  • overlay-slide-out-bottom
  • overlay-slide-in-left
  • overlay-slide-out-left
  • overlay-slide-in-right
  • overlay-slide-out-right

Overlay option demo

Browser support

Requires a browser that supports CSS3.

  • IE10+
  • Safari
  • Chrome
  • Firefox

Installation

Download on GitHub

Step 1: Link required files

<!-- animsition.css -->
<link rel="stylesheet" href="./dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="./dist/js/animsition.min.js"></script>

Step 2: HTML markup

<body>
  <div class="animsition">
    <a href="./page1" class="animsition-link">animsition link 1</a>
    <a href="./page2" class="animsition-link">animsition link 2</a>
  </div>
</body>

If you want each "linkElement" to use a different animation.

<a
  href="./page1"
  class="animsition-link"
  data-animsition-out-class="fade-out-right"
  data-animsition-out-duration="2000"
>
  animsition link 1
</a>

<a
  href="./page2"
  class="animsition-link"
  data-animsition-out-class="rotate-out"
  data-animsition-out-duration="500"
>
  animsition link 2
</a>

If you want to each page to use a different animation.

<div
  class="animsition"
  data-animsition-in-class="fade-in"
  data-animsition-in-duration="1000"
  data-animsition-out-class="fade-out"
  data-animsition-out-duration="800"
>
  ...
</div>

Step 3: Call the animsition

$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'fade-in',
    outClass: 'fade-out',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});

Example

Events

inStart

$('.foo').on('animsition.inStart', function(){})

inEnd

$('.foo').on('animsition.inEnd', function(){})

outStart

$('.foo').on('animsition.outStart', function(){})

outEnd

$('.foo').on('animsition.outEnd', function(){});

Methods

in

$('.foo').animsition('in');

out

$('.foo').animsition('out', $elem, url);