CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapanimsition
Greg
Greg

Reputation: 3063

Issue to get animsition plugin working

I'm trying to get the animsition to work on my web page for smooth page transition, unfortunately it does not work at all (nothing happens)

Both the CSS and the JS of the plugin are loaded. Same for query. The error console does not return any error.

Any idea what the issue is?

Thanks,

HTML

<nav class="navbar-classic">
            <li><a href="bootstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Who are we? </a>
              <ul class="dropdown">
                <li><a href="bootstrap.html" class="animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Sub 1</a></li>
                <li><a href="bootstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Sub 2</a></li>
              </ul>
            </li>
            <li><a href="bootstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Services Services Services</a>
            </li>
            <li><a href="bottstrap.html" class="active animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">Products Products Products</a>
            </li>
          </nav>

JS

$(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; }
  });
});

Upvotes: 1

Views: 6684

Answers (1)

Turnip
Turnip

Reputation: 36712

Your selector $(".animsition") is looking for an element with a class of animsition but non exists in your document.

Look at your console output:

Animsition: Element does not exist on page.

Upvotes: 1

Related Questions