mdelp Posted February 11, 2020 Share Posted February 11, 2020 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 More sharing options...
ZachSaucier Posted February 11, 2020 Share Posted February 11, 2020 Hey mdelp. I assume the click function is the problematic one? If so, that looks to be completely unrelated to Barba. The logic inside of the click function seems fine. Not sure what could be going wrong. Any other details or a working demo would be helpful in us aiding you. Link to comment Share on other sites More sharing options...
akapowl Posted February 12, 2020 Share Posted February 12, 2020 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 More sharing options...
ZachSaucier Posted February 12, 2020 Share Posted February 12, 2020 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 More sharing options...
GreenSock Posted February 12, 2020 Share Posted February 12, 2020 Have you tried the beta of the upcoming release? We did squash a few edge case bugs related to timeline behavior: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Link to comment Share on other sites More sharing options...
mdelp Posted February 12, 2020 Author Share Posted February 12, 2020 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 More sharing options...
ZachSaucier Posted February 12, 2020 Share Posted February 12, 2020 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 More sharing options...
mdelp Posted February 12, 2020 Author Share Posted February 12, 2020 @ZachSaucier I'm nearly there but I'll try to setup a Codepen next week with an example! Link to comment Share on other sites More sharing options...
akapowl Posted February 12, 2020 Share Posted February 12, 2020 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 More sharing options...
ZachSaucier Posted February 12, 2020 Share Posted February 12, 2020 @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 Link to comment Share on other sites More sharing options...
akapowl Posted February 12, 2020 Share Posted February 12, 2020 @zach Well, that's even odder, because for me updating did not fix it. See the updated example. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 13, 2020 Share Posted February 13, 2020 Ah, it works for me locally regardless of the version. Does it work locally for you? Could it be that you updated some other file that's used in the demo locally but didn't update it on the server? Link to comment Share on other sites More sharing options...
akapowl Posted February 13, 2020 Share Posted February 13, 2020 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 More sharing options...
mdelp Posted February 13, 2020 Author Share Posted February 13, 2020 @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 More sharing options...
akapowl Posted February 13, 2020 Share Posted February 13, 2020 @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. 2 Link to comment Share on other sites More sharing options...
akapowl Posted February 13, 2020 Share Posted February 13, 2020 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 More sharing options...
OSUblake Posted February 13, 2020 Share Posted February 13, 2020 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. 5 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 13, 2020 Share Posted February 13, 2020 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 4 Link to comment Share on other sites More sharing options...
akapowl Posted February 13, 2020 Share Posted February 13, 2020 @OSUblake @ZachSaucier Well, I feel very stupid now. That is so obvious that it didn't even come to my mind. You are absolutely right. No way it could work as I tried to make it. Thanks for pointing it out to me. I would have tried a thousand other things before coming to realize that. Thanks a lot for your help, guys. 2 Link to comment Share on other sites More sharing options...
akapowl Posted February 13, 2020 Share Posted February 13, 2020 @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 1 Link to comment Share on other sites More sharing options...
mdelp Posted February 14, 2020 Author Share Posted February 14, 2020 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 More sharing options...
ZachSaucier Posted February 14, 2020 Share Posted February 14, 2020 2 minutes ago, mdelp said: if you guys could give a JS-noob some feedback it would be much appreciated! What are you wanting feedback on? The more specific your request the more likely you are to receive a reply. Link to comment Share on other sites More sharing options...
mdelp Posted February 14, 2020 Author Share Posted February 14, 2020 @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 More sharing options...
akapowl Posted February 14, 2020 Share Posted February 14, 2020 @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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 14, 2020 Share Posted February 14, 2020 Just now, mdelp said: 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? tl.pause(0); 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now