Step 1: Link required files
{% highlight html %} {% endhighlight %}Step 2: HTML markup
{% highlight html %} {% if page.layout == 'overlay' %}Step 3: Call the animsition
{% highlight js %} $(document).ready(function() { {% if page.layout == 'overlay' %} $(".animsition-overlay").animsition({ {% else %} $(".animsition").animsition({ {% endif %} inClass : '{{ page.inAnimateClass }}', outClass : '{{ page.outAnimateClass }}', 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". {% if page.layout == 'overlay' %} overlay : true, {% else %} overlay : false, {% endif %} overlayClass : 'animsition-overlay-slide', overlayParentElement : 'body' }); }); {% endhighlight %}