jQuery Animsition

Component ID

2696913

Component name

jQuery Animsition

Component type

module

Maintenance status

Development status

Component security advisory coverage

not-covered

Component created

Component changed

Component body

This module alllows the JS library "animsition" to be used with libraries.
Download the plugin from github from https://github.com/blivesta/animsition and put it into sites/all/libraries/jquery_animsition

Description:
A simple and easy jQuery plugin for CSS animated page transitions. http://git.blivesta.com/animsition

This module is under active development and is not complete. Currently there is no UI or admin config - it simply allows you to use as a library.

Now use as you wish in your theme. An example is listed below.

$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'fade-in-left',
    outClass: 'fade-out-left',
    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; }
  });
});