Animsition – Easy CSS Animated Page Transitions with jQuery

Animsition is a simple jQuery plugin that will actually make it easy for web designers and developers to add website animations to their projects.

The plugin can be a helpful tool if you want to lift up a website a bit. The current version includes animated page transitions such as fade, rotate, zoom, flip and rotate.

Animsition – Easy CSS Animated Page Transitions with jQuery

Implementing the CSS3 transitions is quite easy, even for beginners in web design.

How to use


Integrating Animsition is done by adding some JavaScript and CSS files to your HTML document. You also need to add the required markup to get started.

<!-- 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/jquery.animsition.min.js"></script>

The HTML markup is easy. If you want to animate all the content on you web page, the main container should be given the proper CSS class:

<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 different elements to have different animations, you should add some data attributes to do it so.

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

In case that you want each page to use different animation, you need to add data attributes to the containter as the following example:

<div

class="animsition"

data-animsition-in="fade-in"

data-animsition-in-duration="1000"

data-animsition-out="fade-out"

data-animsition-out-duration="800"

>

...

</div>

The last step is to call the Animsition plugin:

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

$(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',
    unSupportCss: [
      'animation-duration',
      '-webkit-animation-duration',
      '-o-animation-duration'
    ],
    //"unSupportCss" 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'
  });
});

It is important to know that Animsition requires a browser that supports CSS3, so it works great in IE10+, Safari, Chrome and Firefox.

DEMO DOWNLOAD


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *