Share Posted January 24, 2022 Hi everyone! I'm almost at the goal of my code, basically it works as a timeline guided by the ScrollTrigger plugin. To finish it, I just need to make reverse functions for each animation. But when I try to call the OnReverse method, it simply don't work. I already read the documentation (specially the part in ToggleActions and timeline callbacks) and I used a lot of OnStart() methods. But I can't figure out why the OnReverse method is not getting called when I make a EnterBack action. I tried to call the onReverse in the animation and in the timeline, and doesn't work in both. I attempted to use onEnterback() too. Is that something that I'm doing bad? Can someone give a hint? Thanks in advance See the Pen RwjbByP by mrpsk (@mrpsk) on CodePen Link to comment Share on other sites More sharing options...
Share Posted January 24, 2022 Hi @mrpsk, You've got a lot going on in your code... A more simplified codepen would be helpful for further debugging. I think you'll want to be using onEnter, and onEnterBack for these text changes. That said, these callbacks need to be in the scrollTrigger object (it looks to me like you just have them in the tween). https://greensock.com/docs/v3/Plugins/ScrollTrigger 2 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted January 24, 2022 Hi there seems to be some misundertandings. There is no onReverse method or callback in all of GSAP (Tweens, Timelines, ScrollTrigger, etc). There is an onReverseComplete callback on Tweens and Timelines which fires when an animation is done reversing. onStart is a callback for tweens and timelines onEnterBack is a callback for ScrollTriggers and belongs in the ScrollTrigger config object How you are using it here is incorrect. Please see comments in code below let fourthTransition = gsap.timeline({ scrollTrigger: { trigger: "#main-container-5", id: "container5", start: "top top", end: "top top", markers: true, toggleActions: "play none reverse none", /* *** You could put an onEnterBack here *** */ onEnterBack:function(){} }, /* *** There is no such thing as onReverse() *** */ onReverse: () => { console.log("on reverse!") document.querySelector("#fixed-text").innerText = "13" }, onStart: () => { console.log("START!") }, /* *** onEnterBack() does not belong here *** */ onEnterBack: () => { console.log("on enter back") document.querySelector("#dinamic-text-5").innerText = "15" }, }); 5 Link to comment Share on other sites More sharing options...
Share Posted January 24, 2022 something i only stumbled into by chance one day was that you can make up a nonsense callback for an animation and it will get called on start. this is why it may have appeared that onReverse was doing something. Check console here See the Pen abVoamo?editors=1011 by snorkltv (@snorkltv) on CodePen And as @elegantseagulls stated a reduced demo would help a lot. It was way to much code for me to try to understand. Just provide a minimal demo showing one issue on one thing. It will make it much easier for folks to help you. thanks! 4 Link to comment Share on other sites More sharing options...
Share Posted January 24, 2022 8 minutes ago, Carl said: something i only stumbled into by chance one day was that you can make up a non-sense callback for an animation and it will get called on start. That's because GSAP is built to accommodate getter/setter functions, so if you do this: gsap.to(..., {helloGoodSir: () => console.log("hello")}) You're literally telling GSAP to try to ANIMATE a "helloGoodSir" property, and it'll recognize that it's a function and call it expecting it to act like a getter and return the current value of helloGoodSir. 4 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 25, 2022 @elegantseagulls @Carl I really appreciate your help! I solved it by following Carl advice (totally my mistake when I thought about an onReverse function) and I used onReverseComplete in each container, so now the text changes when the last animation is done and my code is finally complete I updated the code on CodePen, if you want to check how I solved. Thanks guys! 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