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.
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:
$(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.