Jump to content
Search Community

Page transitions with loading element

mdelp test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone,

 

I'm very new to GSAP and have little JS experience, but I'm rebuilding my portfolio and would like to implement something that seems very easy but I can't find anything on how to implement this properly.

 

Basically what I want to do is trigger an animation when someone leaves the page (clicks a link), show a loading screen while the new page loads and when the page is loaded show an inverted animation. It's an overlay of the viewport that I want to animate.

 

First of, is TweenMax suited to be used this way? And can this be achieved without using AJAX, so that it just fires on page leave, shows the loader en inverts the animation when the page is loaded?

 

Animsition offers almost what I need with their overlay transition, but I need multiple layers of the overlay so was looking into TweenMax to achieve this.

 

Hope someone can help me!

 

Thanks!

Link to comment
Share on other sites

Hi @mdelp,

 

Welcome to the forums!

 

GSAP is a Tweening library, it will interpolate values of any JavaScript object ( and a bunch of other stuff thanks to plugins). It does only that.

 

It will handle the animation (tweening) bits of what you are after nicely but it will not handle the loading of other assets or managing states or anything else that's involved in page transitions.

 

What you are after (page transition) sounds pretty simple but it is acually a combination of several moving, and independent, parts that together makes is not so simple in the end.

 

You can definitely use GSAP for animating the transition, triggering a callback to load new content and animating the transition in reverse after the content is loaded. You will need to to the loading and state management yourself (or with another library).

 

Hope this helps.

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Hi Dipscom,

 

Thank you for your reply!

 

I managed to code the animations of both the page out and page in using TweenMax which is working perfect.

Do you happen to know a library that could help me handle the loading state in combination with GSAP?

 

Thanks!

Link to comment
Share on other sites

How deep do you want to go down in this rabit hole?

 

The least complicated is to have a global object that would be your manager. Have it emit events whenever something is done and use listeners to catch those events.

 

If you want to go full on hipster-dev get your head around React or Vue, they have state management plugins that would help. Disclaimer: I'm totally biased towards Vue.

  • Like 5
Link to comment
Share on other sites

I would agree with Dipscom that React or a similar framework is best suited for this type of thing.

 

I don't think animating between page linking would get you a smooth solution.

 

It can also be achieved with all the content hardcoded on a single page. I did it this way on this site:

http://www.questbrands.ca/betterbarriers

Everything is basically handled by GSAP.

 

Note that this way it's very important you devise a workable lazy loading technique so that everything doesn't need to be loaded at once and preferably assets that are never viewed don't get loaded at all. 

 

Look into jquery load() as well, very easy content loading solution that might help you progressively build a page.

 

If you've ever used Foundation it also has an AJAX loader called Interchange that is pretty easy to use.

 

  • Like 3
Link to comment
Share on other sites

Thank you both for the replies, seems like it's a bit harder to achieve than I expected. I'd rather stay away from AJAX since I use WordPress as back-end to my websites, so I don't want to run into trouble there.

 

One more question before I start scouring the web even more, but Animsition (http://git.blivesta.com/animsition/ ) achieves page loading and effects using only jQuery, do you think I can hook into some of those functions using GSAP and extend the animations? Their base plugin is actually what I'm looking for, I just need to adjust the animations itself.

 

Tanks!

Link to comment
Share on other sites

Small status update, I was able to hook into the Animsition functions and do the animations with pure CSS, but unable to do it with TweenMax.

 

Basically I want to use this

 

$(window).on('animsition.inStart', function(){
	TweenMax.to(".overlay", 1.2, {y:'-100%', ease:Power4.easeInOut});
})

 

instead of doing this

 

$(window).on('animsition.inStart', function(){
	$('.overlay').addClass('animin');
})

 

So now I'm adding a class to my overlays which have CSS transitions, but I want to use the GSAP animations.

Problem is that the GSAP animations don't seem to work inside the animsation.inStart function, it ignores it.

 

The functionality is now working, but I would like to use the GSAP animations instead of pure CSS, unless that seems like a silly thing to do at this point.

 

Thanks!

Link to comment
Share on other sites

Hey @mdelp,

 

Firstly well done on getting something working with your setup. I am sorry to rain on your parade but I very much doubt you will be able to easily trigger js based animation using Animsition because it is designed to trigger CSS animations. You'll have all sorts of conflicts with both approaches trying to wrestle control of the element you try to animate.

 

Also, to rain even more, you will have to deal with AJAX or the whole page will reload every time you navigate to a different section. 

 

You could, hijack the click, run a transition-out before triggering the navigation, load the new page, have the loading animation kick in then run a transition-out to reveal the new content.

 

But as you can see, it's a fiddly process of several steps... And you'll be reloading the whole page rather than just swapping sections of it.

 

I have heard of a JavaScript library specifically for page transitions - I have never used myself so, not vouching for it but it was a colleague who, like yourself builds all his sites off WordPress so, I know they would work together.

 

http://barbajs.org

 

  • Like 2
Link to comment
Share on other sites

Wow those are some interesting solutions.

 

With animsition as it looks yu'll be loading the entire page, so how smooth the transitions will be could be severely effected by the time it takes to load the page, and you'll need to be sure it works with wordpress, which builds the page from php files at runtime and could be problematic.  

 

I'm really interested in barbajs. It looks much more robust and actually doesn't reload the whole page it injects new content using what they call PJAX which is actually an AJAX loading technique. This is great because it doesn't have to reload other css or javascript. Since gsap is already instantiated it might be possible to inject animations during barabjs events. I would be very interested to see if this could be made to work with wordpress, looks like it could with tinkering.  

 

Again you could still consider an all on one page solution allowing total control with GSAP, with worpress it would work well with the plugin Advanced Custom Fields which allows you make highly customized builds of wordpress pages. 

 

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Whether you want a one page solution or not if you don't already use it take a look at Advanced Custom Fields for wordpress. It allows you to completely customize both the backend and frontend of a worpress site. Makes wordpress so much easier to work with and more powerful without having to be a php guru.

 

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Right @mdelp, this is what I manage to get out of my buddy.

 

Quote

I think this is the bit he needs. Basically hold off the fadein transition until the tween is completed

 

fadeOut: function () {
      var deferred = Barba.Utils.deferred();
        TweenLite.to('.site-main', 0.4, {
          onComplete: function () {
            deferred.resolve();
          }
        });
      return deferred.promise;
    },

 

And then:

 

Quote

change the class to the barba default

 

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. :D

Link to comment
Share on other sites

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! :)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 8 months later...

Wanted to add my 2 cents as I stumbled across this thread in my own search for help with gsap/barba. 

 

So far this seems to work for me. Still in dev so no warranties on production level code here ;)


 

var tlLoader = new TimelineMax({}); //Using timeline in my project

var FadeTransition = Barba.BaseTransition.extend({ //define the transition in barba
  start: function() {
    Promise
    .all([this.newContainerLoading, this.fadeOut()]) //when new container is loading run you transition animation
    .then(this.fadeIn.bind(this));
  },
  fadeOut: function() {
    var deferred = Barba.Utils.deferred(); //define deferre so you can wait for transition to complete
    tlLoader.set('#loader',{y:'0%'}); //run your fade in tweens here I'm Morphing a svg over my content but you can do whatever you wish
    tlLoader.to('#loader-bg-svg-path', 1, {morphSVG:'M 0 -5 L10 -10 L10 15 L0 20 Z',ease:Linear.easeNone,
      onComplete: function () {
      deferred.resolve();
    }
  });
  return deferred.promise; //return deferred to promise so we can move to fadeIn step
  },
  fadeIn: function() {

    document.body.scrollTop = 0; //this scrollTop might be redundant Im still in dev with this
    this.scrollTop();

    var $el = $(this.newContainer); //run your fade out tweens here 
  
      tlLoader.to('#loader-bg-svg-path', 0.7, {morphSVG:'M 0 15 L10 10 L10 15 L0 20 Z',ease:Linear.easeNone});
      tlLoader.to('#loader', 0, {y:'-100%',ease:Linear.easeNone});
      tlLoader.set('#loader-bg-svg-path', {morphSVG:'M 0 -5 L10 -10 L10 -5 L0 0 Z',ease:Linear.easeNone});
    
      this.done();
    
  },
  scrollTop: function() {
    var deferred = Barba.Utils.deferred();
    var obj = { y: window.pageYOffset };

    TweenLite.to(obj, 0.4, {
      y: 0,
      onUpdate: function() {
        if (obj.y === 0) {
          deferred.resolve();
        }

        window.scroll(0, obj.y);
      },
      onComplete: function() {
        deferred.resolve();
      }
    });

    return deferred.promise;
  }
});

Barba.Pjax.getTransition = function() {
  return FadeTransition;
};

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...