Jump to content
Search Community

OnReverse callback don't trigger

mrpsk test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

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

  • Like 2
Link to comment
Share on other sites

  • Solution

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"
  },
});

 

  • Like 5
Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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

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