A simple and easy jQuery plugin for CSS animated page transitions.

  • By Yasuyuki Enomoto
  • Last update: Jan 2, 2023
  • Comments: 15

Animsition

Bower version npm version Build Status

A simple and easy jQuery plugin for CSS animated page transitions.

Demo & Installation

http://git.blivesta.com/animsition/

Development

Install : nodejs npm gulp

$ git clone https://github.com/blivesta/animsition.git
$ cd animsition
$ git checkout -b patch-1
$ npm install && gulp

Build

$ gulp build

Build -> Watch

$ gulp

CDN

cdnjs

  • dist/css/animsition.css
  • dist/css/animsition.min.css
  • dist/js/animsition.js
  • dist/js/animsition.min.js

Contributing

To contribute to animsition, clone this repo locally and commit your code.
Please check that everything works before opening a pull-request.

Contributors

License

Released under the MIT license.


WordPress plugin

Page Transition

Github

https://github.com/blivesta/animsition

Comments(15)

  • 1

    why page out transition is not on beforeunload event ?

    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

  • 2

    Animsition doesn't work with jQuery 3.2.1

    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 😕

  • 3

    Animsition stuck on loading

    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?

  • 4

    Update in v4.0.0

    #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

  • 5

    Flash between page loads -> Chrome & Safari

    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

  • 6

    Displays the old page twice

    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

  • 7

    Problem in out transition when a tag has hashed link on same page

    @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.

  • 8

    Fancybox issue with animsition

    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?

  • 9

    can install / use it

    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?

  • 10

    Loading problems and iOS Safari back button issue

    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.

  • 11

    Better bug fix #78 #80

    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.

  • 12

    animation-duration edge browser

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

    });

  • 13

    Extend functionality to FORM / POST

    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

    element and send variables via POST - is there a way to make this type of transition between pages to be animsited?

    Wojtek

  • 14

    Animsition: Does not support this browser.

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

    image 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

  • 15

    Animsition not working in jQuery 3.4.1 - WORKAROUND

    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.