1

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; }
  });
});
Greg
  • 2,937
  • 9
  • 47
  • 96
  • The answer lies in your console. Check it and you'll see that it says `Animsition: Element does not exist on page.` The target element that you want to apply the effect to needs to have `class="animsition"` for your example to work, since you're applying it to `$('.animsition')` – jmcgriz Mar 28 '16 at 16:18

1 Answers1

1

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.

Turnip
  • 33,774
  • 14
  • 81
  • 102