akapowl

@ZachSaucier Gotta quickly give you a special thank you. At this Point I finally managed to get the result I wanted to achieve. 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

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

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?

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

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

@zach Well, that's even odder, because for me updating did not fix it. See the updated example.

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

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?

Yup, sounds about right ...seems like ZachSaucier was right with what he said. The last version I used before 3.0 was 2.1.2. In my last project I used animationFunction.play().delay(5.0); instead of animationFunction.delay(5.0).play(); and it gave me the result that I expected. Seems, like I was kind of lucky that it worked then. Made a pen for my 2.1.2 version. https://codepen.io/akapowl/pen/5b6fa69a6b0611a4a814fac95e894a1a Thanks for your help, everybody.

Well, it always worked like this before v3.0, and even in the Docs for 3.0 it says: This method serves as both a getter and setter. Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining, like myAnimation.delay(2).timeScale(0.5).play(1); https://greensock.com/docs/v3/GSAP/Timeline/delay()

Thanks, Carl! Both those solutions work as intended. Still, if I am not mistaken, my approach should have worked too, though - seems like it's buggy in GSAP 3.0.

Thanks, ZachSaucier. I know, I can declare the delay inside the tween itself. The codepen demo is just a showcase example for my problem. I need to make a more complicated timeline run on a delay on exactly one occasion, whereas it is supposed to run without delay on other occasions. So I need the .delay().play() functionality or a delayedCall, which doesn't seem to work as intended, either.

Hello there, since I updated to GSAP 3.0, I am struggling to make timelines / timeline-functions run with a delay. I added a codepen-demo to demonstrate my issue. Am I overseeing something or is this a problem in GSAP 3.0? Cheers, Paul