Hey @blivesta ,

Thanks for this great script. I am developing a wordpress plugin based on your clickstream script.

I saw that if I want to add page out transition on all pages then I need to add class "clickstream-link" on all "a" link tags.

Is there any specific reason for this ? Why did you not used onbeforeunload event ? Is there any other way to add page out transition ?

Can you please through some light on it ?

Thanks.

Kind Regards, Gaurav Padia

Hi,

Animsition is not working with the latest version of jQuery. Its work fine with 1.11.0 version.

Any fix? I don't want use an older version of jQuery 😕

When I call the Animsition transition right after the document.ready event, it works just fine.

When I try to call the Animsition transition after loading content through an ajax call, it somehow hangs on the loading screen...

How could this happen?

#49 #46 #45 #44 #34 #33

ToDo

• [ ] ~~Remove of event $(window).load.~~
• [ ] ~~Remove of options.overlay.~~
• [ ] ~~Inclusion of options inDelay and outDelay.~~
• [x] Change of unit for time from s to ms.
• [x] Change and addition of event API.
• [x] Update of loading options.
• [x] Remove of .less and .scss in the src folder, with plan to shift to css.
• [x] Plan to shift from grunt to gulp or node (npm script).
• [x] Addition of transition options
• [x] Addition of timeout options

Demo files

~~https://gist.github.com/blivesta/b1a01c2a4d39bf1ea628/~~ ~~https://gist.github.com/blivesta/b1a01c2a4d39bf1ea628/download~~

js https://github.com/blivesta/animsition/blob/v4.0.0/dist/js/jquery.animsition.js css https://github.com/blivesta/animsition/blob/v4.0.0/dist/css/animsition.css html(example) https://gist.github.com/blivesta/6f7a51440f3b9ec283d

I've seen this mentioned in the issues section before but i cant see that there is actually an answer for it. I'm using the overlay effect to load between pages, however there is a flicker in between each page when viewing in chrome or safari. Firefox seems to load it fine. I noticed in the css package that many of the overlay transitions were missing -webkit- specific definitions so my assumption is that this must be in part to that. Can someone tell me why this is happening? Really ruins the overall experience when it isnt a fluid transition as intended

Hi there,

i would love to use this great plugin for a drupal installation. The transition itself works fine but the old page displays twice. After one click, the animation begins. After fading out the old content, the page displays again followed by the url request. The new page loads followed by the choosen transition. Are there ways to solve this?

Thank you very much

@blivesta There is one more issue. If a tag have hashed link like #top on same page then page becomes blank.

To reproduce this create a link with hashed href as per example below:

If link with #top is clicked then page become blank instead of going to position of a tag with name=top.

I am not sure what should be better idea to completely exclude a tag with hashed link or show an animation on it too.

Thanks.

When opening an fancybox the animsition is not called, when i close the fancybox with the button (<button data-fancybox-close="" class="fancybox-button fancybox-button--close" title="Close (Esc)"></button>) the overlay of animsition is activated again and won't close.

I already tried excluding it on the linkElement with this: linkElement: 'a:not([target="_blank"]):not([href^="#"]):not(#scroll-to-home-more):not(".no-animsition"):not(".fancyBoxLink"),button:not(".fancybox-button")',

Without luck you can guess. Is there an simple workaround?

hi, nice to see you project, but can i ask something, i have download your animsition, but can i know how to use it for default html, because after i download it i try to see the docs package but is not appear, can i get any solutions?

In Safari on iOS when you click the back button to go to the previous page the page appears blank. Also some pages don't load at all. The loading icon never disappears. You have to refresh for the page to load.

This in my opinion is 100 times better than fix in patch-4.0.1 as this does not trigger a window refresh. On example pages maybe it looks more or less good but in real web sites doing a page refresh on every history back button is pretty ugly, especially on iOS.

This does not work with custom elements like overlays however, maybe a better way would be to save somewhere all DOM modifications in out method and in in method to revert them?

As I understand it will work only for elements that have an in animation on the same elements that have an out one, because this will trigger reverting classes.

Hi, We are having a problem with animsition and page doesn't load animation and nor the styling is added. style="animation-duration: 1500ms; opacity: 1;"

Though loading animation is added and doesn't anything after that.

This only happens with EDGE browser. Tried in FireFox, Chrome and IE and it all works.

Our code: $(document).ready(function () { $(".animsition").animsition({ inClass: 'fade-in', outClass: 'fade-out', inDuration: 1500, outDuration: 800, linkElement: '.animsition-link',

    loadingClass: 'animsition-loading',

    transition: function (url) { window.location.href = url; }
});

});

Hi I managed to get your code working nicely - fantastic piece of code! Some of the elements of a portal I am developing which cause long loads are activated by

Hey Guys, I'm using this beautiful plugin on my project with java . when i run project with eclipse it work perfecly . but when i use maven-jar-plugin or any other plugin allow me to generate one jar with all dependency. the animation not work and in console show me

Animsition: Element does not exist on page. Animsition: Does not support this browser.

   $(".animsition").animsition({
      inClass: 'fade-in',
      outClass: 'fade-out',
      inDuration: 800,
      outDuration: 500,
      
      linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([class*="lg-trigger"])', // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
      loading: true,
      loadingParentElement: 'html', //animsition wrapper element
      loadingClass: 'animsition-loading',
      loadingInner: '', // e.g '<img src="assets/img/loading.svg" />'
      timeout: true,
      timeoutCountdown: 4000,
      onLoadEvent: true,
      browser: ['animation-duration', '-webkit-animation-duration', '-o-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 : 'html',
      transition: function(url){ window.location.href = url; }
   });

the image in right it work, but in the ledt not . i change my browser but not work. animation version : 4.0.2 jQuery Version : 3.2.1

Hey Guys, after not longer ignoring the newest jquery version i've tried a lot of methods to enable animsition in jquery v3.* I've found a solution without knowing why it is working. But it works. The problem seems to be that the window Object is not available inside the function. After reading a lot to this topic I add following lines

var loaded = false; $(window).on("load." + namespace, function() { loaded = true; }); var __ = { init: function(options) { //...

and

if(options.onLoadEvent) { if(loaded) { if(__.settings.timer) clearTimeout(__.settings.timer); __.in.call(_this); } else { $window.on("load", function(e) { if(__.settings.timer) clearTimeout(__.settings.timer); __.in.call(_this); }); }

However it works but I take no responsibility :)

I really hope, that the author will fix this correctly.