Jump to content
Search Community

Reset timeline after barba.js page transition

mdelp test
Moderator Tag

Recommended Posts

Hi all,

 

I'm building a site that uses Barba.js to handle the page transitions. All is going well but I'm running into a small issue with my navigation timeline that only works on first page load. After I navigate to another page the barba transitions fire and the new page loads, but my timeline seems to stop working after that.

 

I've included the important parts of the code I use, I suspect I need to set the reversed state of the timeline somewhere inside the Barba function, but after trying different approaches I still haven't found the solution.

 

Update: reworked the Barba code based on their v2 version.

 

All help is appreciated!

See the Pen GRJJXOr by mathieudelporte (@mathieudelporte) on CodePen

Link to comment
Share on other sites

Hey there!
I don't know if this is or might be related but I am still going to post it here instead of opening a new thread, because I think it might be a related problem.

Since upgrading to GSAP v3 I noticed some issues with timelines, too, when using with Barba.js.
My transition-animations (set-up when GSAP v2.x was still in use) still work as fine as before, but when I am trying to play any timeline (even when it was set up in global scope) after the transition has finished, it won't play the animations of that timeline at all. This seems pretty odd, because onComplete-functions or .then-functions included in those timelines are being executed as expected.

 

I hope this is somewhat understandable - don't know how to set up a codepen that would be working with barba-transitions.

 

Any idea what the problem might be?

Link to comment
Share on other sites

8 minutes ago, akapowl said:

My transition-animations (set-up when GSAP v2.x was still in use) still work as fine as before, but when I am trying to play any timeline (even when it was set up in global scope) after the transition has finished, it won't play the animations of that timeline at all. This seems pretty odd, because onComplete-functions or .then-functions included in those timelines are being executed as expected.

That's pretty weird behavior. I've never seen anything like that I don't think. A demo would be very helpful in us figuring out what is going on.

 

9 minutes ago, akapowl said:

don't know how to set up a codepen that would be working with barba-transitions.

You could create a very basic set of web pages for us to look at. Just don't minify/bundle/whatever the JS code so we can see what's actually going on without too much effort. Maybe upload the whole project via a ZIP file so we can edit it ourselves.

Link to comment
Share on other sites

I figured out what the problem was in my setup, specifically why my timelines would only run on the first page load. Basically Barba doesn't reinit scripts after a page transition, so you have to load them inside a barba hook. So I just did this:

 

barba.hooks.after(() => {
	$('.c-hamburger').on('click', function() {
		$('.c-hamburger, .hamburger, .r-header').toggleClass('is-active');
		tl_overlay_in.reversed() ? tl_overlay_in.play() : tl_overlay_in.reverse();
	});
});

 

So after every page transition this gets reinitialised and all runs perfect now. This actually applies to other JS (like a slider) as well.

There might be a better way to do this, but I'll do some more homework later.

 

I do have another question though, in the onComplete hook of my page out transition of Barba I'd like to reset a timeline to its starting values, in the starting state it would be on a page load. Is there a specific function for that?

 

tl_overlay_in.invalidate().restart();

 

The code above doesn't seem to work, is there something that I can use?

 

barba.init({
	transitions: [{
	  name: 'transition-base',
	  leave: function(data) {
		var done = this.async();
		gsap.to('.overlay', {left: 0, duration: .5, ease: 'cubicbezier'});
        // Somewhere here or in the onComplete I need to reset a specific timeline to its starting values
		gsap.to(data.current.container, 0.5, {
		  opacity: 0,
		  onComplete: done
		});
	  },
	  enter: function(data) {
		var done = this.async();
		gsap.to('.overlay', {left: '100%', duration: .5, delay: .5, ease: 'cubicbezier', clearProps: 'all'});
		gsap.from(data.next.container, 0.5, {
		  opacity: 0,
		  onComplete: done
		});
	  }
	}]
});

 

Link to comment
Share on other sites

2 minutes ago, mdelp said:

I'd like to reset a timeline to its starting values, in the starting state it would be on a page load. Is there a specific function for that?

Depending on your needs, .play(0) may work. Or setting clearProps: true on the elements that have been affected. There are some similar methods as well.

 

Hard to say what you should do without a demo/code we can play around with and look at.

Link to comment
Share on other sites

First off, thank you guys for your quick replies!

 

@Jack

I tried after you posted this but it didn't work for me - thanks for the tip, though.

@Zach

I prepared a very reduced example-set - it's still kind of a lot js, though - and might be a little messy, too.
You can find the pages contained in the example-case here:

[Edited in hindsight - links outdated]

 

And you can download the example as a zip-file here if you want:

 

[Edited in hindsight - link outdated]

 

Don't know if I might be doing something wrong there - but as stated before, it worked this way for me before updating to GSAPv3.

I also tried tinkering around with play(0) and clearProps but nothing seems to do the trick.

 

What I am refferring to in this scenario is the "scroll-indicator" animation.

 

The timeline / timeline-function is set up in global scope and the command to play the timeline is given in the pageTransitions() function under views for the namespace 'index'. When you start off at index.html the animation plays as expected - so far, so good.

 

When you leave the page to test.html and then return to index.html the animation won't play again, yet the onComplete part in the timeline is being executed - same behaviour when starting off on test.html and moving to index.html.

 

Looking forward to your replies.

 

Edit:

updated the links because the all linked to index.html

 

Link to comment
Share on other sites

Actually, locally it shouldn't be working as intendend at all, since barba's ajax requests require a server environment to be working in the first place.

I am using VS-Code's local server extension for testing - but there it doesn't work as intended neither.
 

I just tried reverting back to TweenMax v2.1.2 because I was absolutely sure, that it worked with that version - but I was proven wrong.
It doesn't work with that version neither - so I guess it must be an issue related with Barba rather than with GSAP.

Dang...

 

 

Link to comment
Share on other sites

@akapowl I got everything working in my setup, even locally (both with the stable and beta release of GSAP).

 

I'll see if I can bundle a base example of my setup after the weekend, I have a prototype online but don't want to throw all my code out there just now (new site).

Link to comment
Share on other sites

@mdelp

Great to hear that. Maybe taking a look at your setup will get me further with my problem.

I fiddeled around a bit more and got to find that single tweens like so...

 

    gsap.to('.scroll-indicator-main', { duration: 1.5, scaleY: 1, ease: "expo.inOut", onComplete:function(){
        console.log ('Look, this is being executed...')
    } })

 

... are being animated as expected in every scenario - it's just the timelines that seem to cause problems.

  • Like 2
Link to comment
Share on other sites

Unfortunately this doesn't really solve my problems, when I need to play a rather complex timeline at somepoint after a barba-transition.

 

I also found that when I put the timeline as well as the command to play that timeline into the same function like this...

 

 
function fireThisAfterTransition() {
 
    var scrollIndicationAnimation = gsap.timeline({ paused: true, reversed: true, force3D:true }); 
                
    scrollIndicationAnimation          
    .set('.scroll-indicator-main', { transformOrigin: "50% 0%" })
    .to('.scroll-indicator-main', { duration: 1.5, scaleY: 1, ease: "expo.inOut" })
    .set('.scroll-indicator-main', { transformOrigin: "50% 100%" })
    .to('.scroll-indicator-main', { duration: 1.5, scaleY: 0, ease: "expo.inOut", onComplete:function(){
        console.log ('Look, this is being executed...')
    }  })
    .set('.scroll-indicator-main', { transformOrigin: "50% 0%" })
    ;
  
   scrollIndicationAnimation.play();
 
}

 

... and call that function after the barba-transition has ended, it works and the timeline will be animated.

But this lacks the possibility to really control the timeline when I need to.


Is it possible that the way barba works at this point, it is not compliant with the way GSAP's timelines are made up?

Link to comment
Share on other sites

56 minutes ago, akapowl said:

Is it possible that the way barba works at this point, it is not compliant with the way GSAP's timelines are made up?

 

No. I just looked at your zip file, and it looks like you are trying to replay the scrollIndicationAnimation timeline. That obviously won't work because the original elements aren't inside the page anymore. You would have to create a new timeline to target the new elements. 

  • Like 5
Link to comment
Share on other sites

17 hours ago, akapowl said:

locally it shouldn't be working as intendend at all, since barba's ajax requests require a server environment to be working in the first place.

True :) My fault.

 

@akapowl After looking into it, I realized that the issue is because the targets of the timeline don't exist when you navigate back to the page. What I mean is that when you load the index, the timeline is created and played. When you go to the test page, the targets of the timeline are removed from the page. Then when you go back to the index, the targets get added again to the page and the timeline plays correctly but the targets that the timeline is referencing are the old ones that were removed. You need to create a new timeline each time the page loads, you can't reuse old timelines because the targets get removed.

https://codepen.io/GreenSock/project/editor/ZybaPo 

  • Like 4
Link to comment
Share on other sites

 

@ZachSaucier

Gotta quickly give you a special thank you. 

At this Point I finally managed to get the result I wanted to achieve.

 

23 hours ago, ZachSaucier said:

@akapowl Updating GSAP to version 3.2.0 in your project fixes the error for me: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Before you posted this you must have posted and then immediately deleted something about my

 var scrollIndicationAnimation = scrollIndicationAnimation();

being the same and that I should change the variable-part.

 

I only saw that post in my e-Mail-notifications though and I am glad I did, because only this in combination with what you and Blake said later on, made me find my final solution. Just wanted to say thanks once again for helping me out.

 

Cheers

  • Like 1
Link to comment
Share on other sites

I've set up a quick example of my setup. Everything works and I don't need to reinit my scripts in this setup for some reason.

Check https://dev.mathieudelporte.be/barba-js for my uncompiled code.

 

It looks like the nav transition is a bit clunky though, not sure why the performance takes a hit there.

 

I'll probably have to add a bunch of more checks and lines of code to make it bullet-proof, but if you guys could give a JS-noob some feedback it would be much appreciated!

Link to comment
Share on other sites

@ZachSaucier my initial question in this thread was if there is a way to completely reset a timeline without reverse();

So inside the leave transition of Barba in the example I reverse the timeline, but is it possible to reset it in 0s?

I tried doing tl_nav.invalidate(); but that doesn't seem to work.

Link to comment
Share on other sites

@mdelp

Looking good.

One thing I can tell you is, that the reason, why you do not need to reinit your scripts in this setup, is beacause the only script that you use (except for the barba setup)  is applied to the navigation module, which is outside of the <main data-barba="container"> . This means that it does not get removed and reapplied on every transition, but stays where it is and thus does not need to be re-initiated.

 

You will only need to re-initiate scripts that aim at elements, that are inside of  the <main data-barba="container"> and thus get removed and/or replaced.

  • Like 1
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...