trompx

Yes my bad Jack, I meant "animation + delay". If the ease is an easeOut for instance, when I play it starts fast, and if I reverse towards the end of the animation, it starts reversing slow. So that's why I want to be able to set a different ease for the reverse, i want the reverse to behave like the easeOut. So play/reverse doesn't work here. So the solution is to tween the timeline, so I can tween the progress (or the duration as you suggested) of the timeline with the ease I want. Now for the usecase, I want to show/hide a menu with elements. I want to have the same ease to showMenu (forward) and to hideMenu (backward/reverse). I want the menu to hide immediately and as fast as it initially appears on hideMenu. Now, when showing the menu, I have a menu background, AND menu elements that I animateIn with a delay, and that's here that everything falls appart with gsap. As I can't use play/reverse (because of the condition of needing to start hiding the background as soon as I hideMenu: in fact if I were just to use reverse and if we were at the end of the animation, by reversing the timeline, the background would not hide immediately because it would first animateOut the menu elements), I have to tween my timeline. Now if I animate both the menu background + the menu elements, there will be a problem. In fact, due to the delay introduced by the menu elements animation, when tweening the timeline and setting my ease, it applies now to the tl.duration() (which takes into account the delay!). So I had to split the timeline in two. 1. for the menu background. As it doesn't have a delay, tweening the timeline and setting the correct ease just works. 2. for the menu elements, because of the problem I mentioned (where tweening the timeline with an ease applies also to the delay), I have to use play/reverse (which is less than ideal as I lose the possibility to set a different ease on reverse). As a hack, I sync the duration of the menu background hiding with the elements animating out. So I needed to use timescale to end up with an animation duration = to the tween duration of the background. It is not the best but the effect looks almost exactly as I'd wish. But it would be a infinitely easier if gsap would allow to set a different ease when reversing. Anyway, thanks for the help, really appreciate!

Thanks for your input Jack Hum.. I get that the timeline duration increases when I add a delay, but, correct me if I am wrong, when I set an ease, it is only applied to the animation, and not to the animation + ease. Hence the problem while animating the progress (or the duration) with another tween, as the ease applies to the whole (animation + delay). As I stated When I am talking remainingDuration, it is to have a single variable but its value is different in forward and backward. // play const remainingDuration = (1 - currentProgress) * tl.duration(); // reverse const remainingDuration = currentProgress * tl.duration(); I could of course animate the duration directly but the problem stays the same. Anyway I kind of found a solution by, separating my timeline in two timelines (one which animates a wrapper/background and a second that animates its content which animates after a delay). For the background, I can tween the timeline as it doesn't introduce a delay. For the content which uses a delay, I HAVE to use play()/reverse() (because of the problem of tweening the timeline which applies the ease to the delay and not only the animation) but managed to sync it with the first timeline by normalizing the reverse animation according to the first timeline duration through timescale.

Hello, I want to apply a new ease when reversing a timeline. To make it works, I tween the timeline progress. I get the current progress and calculate the duration remaining. I can reproduce the same ease by doing: // Original animation ease tl.fromTo( wrapperRef.current, { opacity: 0.3, }, { opacity: 1, duration: duration, ease: myease, }, 0 ); // Reproduce the animation ease by tweening the timeline tl.fromTo( wrapperRef.current, { opacity: 0.3, }, { opacity: 1, duration: duration, // Without ease so Linear.easeNone because we set the ease on the tweenTl }, 0 ); const currentProgress = tl.progress(); const remainingDuration = (1 - currentProgress) * tl.duration(); tweenTl && tweenTl.kill(); tweenTl = gsap.to(tl, { duration: remainingDuration, progress: 1, ease: myease, }); I do the same when I want to reverse, instead I just tween progress to 0. However, if I have a delay in the timeline, when I tween its progress, it breaks. By doing: tl.fromTo( wrapperRef.current, { opacity: 0.3, }, { opacity: 1, delay: 1, duration: duration, ease: myease, }, 0 ); The timeline waits 1 second before executing the animation and applies myease only to the animation. Say the duration = 1s. In the first case, the ease spans on only that 1s. If now I do: const currentProgress = tl.progress(); const remainingDuration = (1 - currentProgress) * tl.duration(); tweenTl && tweenTl.kill(); tweenTl = gsap.to(tl, { duration: remainingDuration, progress: 1, ease: myease, }); Here, tl.duration() = 2s So the ease is also applied to the delay thus "breaking" the animation. Is there a solution to that problem?

Thanks a lot for your input everyone. @agm1984 my usecase is a bit different, what I really try to achieve is being able to transition from page A->B with a certain type of animation and animate the page elements In and Out with a different duration than the one of the page themself. I can have canvas / webgl on those pages and I'd need to react to the end of their animations in the transition container to trigger the next action (according to the transition type: OutAndIn, OutThenIn...). @elegantseagulls I've worked some time ago on an implementation but with classic es6 modules (no react, and no next.js) so I have to change a lot of stuff (I used to work with event emitter but is is not the react way so I try to come up with something better). @Rodrigo thanks again one more time to trying to come up with a working demo When you pass a key={path} on the transition component, it can have two behaviours. If you animate it again before it has finished animating (with popstate really fast), the animation is different. Anyway, your ideas helped me and put me in the right direction, thanks again!

Thanks a lot @Rodrigo! I really appreciate your help What I am trying to achieve is to have on the _app.js file a sort of interface that will expose general events (when I say events it may be either real events through an event emitter or just setting a state in the context api for instance -> just a way to communicate a state change between components) that I can extend on specific pages if I need. For instance _app.js would set a default transition from one page to another (say opacity 0->1 for entering page, 1->0 for exiting page or just the fadeIn/Out or SlideIn/Out of an overlay). Then for some pages, I would like to override and/or extend the default transition to animate page specific elements to enhance the overall effect. Thus I would need some events like: - onAnimateIn : which then triggers a doneAnimateIn - onAnimateOut : which then triggers a doneAnimateOut which would inform RTG/next js that the component can be unmounted Those events can be called in different order or simultanously. Say we are on home, if I go to about page, I want the default transition (with an overlay). In that case it would be a OutThenIn type of animation. If I go to a project page, I would like to animate the project slider on the home page nicely and transition in the project page like if there was no interruption. In that case it would be a OutAndIn type of animation. I don't know how to design the TransitionController loaded in _app.js to handle this. In your solution, it seems the component is not aware of which is the other page having to transition In/Out so it should be done in a parent container I guess. Would also love to hear if you already had to deal with that kind of stuff and how you solved this @elegantseagulls

Hey @Rodrigo I am currently trying to animate the page transition for a next.js project. Did you manage to implement this with RTG? That would be super helpful. Especially the part where you say:

Yes I totally understand that it may be not worth it, and there is a solution. As all tweens / timelines have ids, I think it should not be so hard to know that a completely separate tween is animating the timeline's playhead though. Anyway thanks a bunch for the fast help!

Thanks for your input. I mean my solution were already working, yours works totally fine too. But I was more wondering why after killing a timeline the onComplete event can still fires. Wouldn't it be more logical to automatically kill the tweens internally? From the docs when we kill a timeline it is supposed to kill all its tweens so this behaviour is not what I was expecting as it is obviously not immediatly available for GB as it has at least to wait that the tweenTo is done. I haven't done any test yet to check if the object was really GBed in the devtools in my SPA on the tweenTo finished. And my bad if I missed the bit of info explaining exactly this.

Hello everyone, I was animating an element with mytimeline (a timelinemax with an onComplete function) with the following : mytimeline.progress(0, false).timeScale(1).tweenTo(mytimeline.duration(), { ease: 'myease' }); I have a destroy function that is called when I remove the page from the dom. When it is called, I do: mytimeline.kill(); But After the destroy has been called, the onComplete function of the mytimeline still fires (thus the animation keeps going despite I just killed it). I noticed here https://greensock.com/docs/TimelineMax/tweenTo that tweenTo create a timeline which animate the mytimeline time. Is it intentional that when killing the mytimeline, the tweenTo still holds a reference of mytimeline to complete it and thus the only way to really kill it would be to : - save a reference of the tweenTo - before killing the mytimeline, kill the reference to the tweenTo first Wouldn't it be better to automatically kill the tweenTo instance when the timeline it is animating is killed or not defined anymore ? Thanks in advance for the clarifications, and for the great library