Search the Community

Also check out this discussion with a couple of frameworks that do this sort of thing, Barba js might be what you're looking for.

I think this is the first question I've seen that dealt specifically with localStorage. Yes, you can use local/sessionStorage to keep track of what animations have played, but for a smooth transition between page transitions without a jarring page load, you really need to use some type of AJAX/SPA based loading technique. Don't know if you saw this page, but it has a couple of other suggestions like jQuery and barba.js.

You can give Barba.js a try that works with simple HTML templates if you don't want to learn new framework, though at some point you will have to. Check the following thread that discusses Barba.js.

That didn't seem to get me any further, I think these kind of animations are still a bit out of my league. I'll get to studying some more JS and try to do this in the future. For now I'll go with the Animsition route which is working fine although the Barba way seems a bit more robust. Thanks for the help anyway, seems like a great community here!

Right @mdelp, this is what I manage to get out of my buddy. fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.site-main', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, And then: fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.barba-container', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, Whether it works or is of any help, I have no clue. I offer no warranties or endorse this product. I'm just the messenger.

Hi guys, So I got things working perfectly now using Animsition and CSS animations but I notice some performance issues that slow down the animations from time to time. Since I'm very interested in Barba I started integrating this on a testsite but am a bit confused as to how I can integrate the Tweenmax functions. When I use the standard Barba fade transition it works flawless, but I can't seem to figure out how to change the standard fade transitions to the Tweenmax transitions. This is the standard Barba transition: var FadeTransition = Barba.BaseTransition.extend({ start: function() { /** * This function is automatically called as soon the Transition starts * this.newContainerLoading is a Promise for the loading of the new container * (Barba.js also comes with an handy Promise polyfill!) */ // As soon the loading is finished and the old page is faded out, let's fade the new page Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { /** * this.oldContainer is the HTMLElement of the old Container */ return $(this.oldContainer).animate({ opacity: 0 }).promise(); }, fadeIn: function() { /** * this.newContainer is the HTMLElement of the new Container * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden) * Please note, newContainer is available just after newContainerLoading is resolved! */ var _this = this; var $el = $(this.newContainer); $(this.oldContainer).hide(); $el.css({ visibility : 'visible', opacity : 0 }); $el.animate({ opacity: 1 }, 400, function() { /** * Do not forget to call .done() as soon your transition is finished! * .done() will automatically remove from the DOM the old Container */ _this.done(); }); } }); /** * Next step, you have to tell Barba to use the new Transition */ Barba.Pjax.getTransition = function() { /** * Here you can use your own logic! * For example you can use different Transition based on the current page or link... */ return FadeTransition; }; Now I want to integrate the following into the above for the fadeout of the page (when a link is clicked and the site goes to a new page, before the new page starts loading): TweenMax.to(".overlay-black", 1.2, {height:'100%', ease:Power4.easeInOut}); TweenMax.to(".overlay-yellow", 1.4, {height:'100%', ease:Power4.easeInOut}); TweenMax.to(".overlay-white", 1.6, {height:'100%', ease:Power4.easeInOut}); And for the fade-in after the new page has loaded TweenMax.to(".overlay-black", 1.6, {height:'0', ease:Power4.easeInOut}); TweenMax.to(".overlay-yellow", 1.4, {height:'0', ease:Power4.easeInOut}); TweenMax.to(".overlay-white", 1.2, {height:'0', ease:Power4.easeInOut}); Now the Tweenmax functions probably have to go in a timeline first? And after, any idea how I can integrate the functions into the Barba functions that handle the transitions? As you have noticed my JS is very basic and I still have a lot to learn (working on it), so it would be great if someone can help me out. Thanks!

We were discussing the issue of animations between page linking on this post https://greensock.com/forums/topic/17740-page-transitions-with-loading-element/ There are some interesting frameworks that handle this sort of thing particularly barba.js.

Looks like there is already a solution for integrating with wordpress. Now I'm really stoked about barba this could allow me to combine pretty much everything I use in website. https://www.npmjs.com/package/wp-barba-page-preloader

According to the transition page on the barba.js site you can create animation based on any library, and quite easily, so GSAP should be a go for sure with this. I'll be very interested to see if you can make workable with WP. Good luck.

Thanks again for the feedback! I'm going to try out both Animsition and BarbaJS and see where I end up. The initial idea was just to have an out transition, then a white screen with loader and an in transition which I managed to do with Animsation. Barba.js does look interesting indeed if I can make it work with WP. I'm not keen on the one-page idea as the website contains alot of different pages and projects. I'll keep you posted on the progress though if I come up with a solution! Thanks!

I use barba.js and only change loaded to true when the respective promise gets fulfilled. First time using promises; strange at first, but I guess I'll get the hang of it and start to see the advantages.