how to detect when a tween is activated in reverse (timeline)

[yeisonvelez11 0 Likes (Newbie)]

I  know these events: onReverseComplete, onStart, onComplete

 

but I need to know some way to detect when a tween becomes active once its transition has finished but it is accessed again from behind (something like onReverse) it would be something like the onStart but vice versa

is this possible?

 

    tl.from("#square", {
      autoAlpha: 0,
      scale: 4,
      duration: 3,
      onStart: function () {
        console.log("onStart");
      },
      onReverseComplete: () => {
        console.log("onverserComplete");
      },
      onComplete: () => {
        console.log("onComplete");
      },
      onReverse: () => {
        console.log("onverse");
      },
      onEnter: () => {
        console.log("onEnter");
      }

    });

 

http://plnkr.co/edit/SG7iwRXKisKHJOV5?open=lib%2Fscript.js

[PointC 11,186 Likes (Superhero)]

We have a couple threads about this topic which should help.

 

Happy tweening.

 

[yeisonvelez11 0 Likes (Newbie)]

thanks for your help,I have seen the links, but in my case I need to fire a function when something like onReverse triggers...

[ZachSaucier 6,069 Likes (Superhero)]

Have you considered using a .call() right after the tween of interest? 

[yeisonvelez11 0 Likes (Newbie)]

@ZachSaucier excuse my ignorance, I hardly get used to this great library, but I don't understand how what you say can help me capture an onReverse event or similar

[ZachSaucier 6,069 Likes (Superhero)]

tl.from("#square", {
  autoAlpha: 0,
  scale: 4,
  duration: 3,
})
.call(() => {
  console.log(`timeline is reversed: ${tl.reversed()}`);
})

 

[yeisonvelez11 0 Likes (Newbie)]

this not works for me...  http://plnkr.co/edit/ZBtrFiFuipV2Kr5w?open=lib%2Fscript.js

[akapowl 1,462 Likes (Superhero)]

 

Hey @yeisonvelez11

 

In your case using ScrollTrigger, wouldn't the onEnterBack-callback of the ScrollTrigger be sufficient?

 

See the Pen gOwGmyO by akapowl (@akapowl) on CodePen

 

[yeisonvelez11 0 Likes (Newbie)]

I have a timeline with several tween. That's why I need to achieve it for a specific tween

[GreenSock 12,415 Likes (Superhero)]

It's very uncommon that anyone would need an onReverse and we don't want to impose a performance penalty on all tweens by adding more conditional logic that must run for every tween on every render, but you could get that behavior by tapping into the onUpdate functionality to run some logic that'll fire your function only when the animation starts going backwards. Here's a helper function: 

function onReverse(func, onlyAfterComplete) {
	let time = 0,
		reversed;
	return function() {
		let t = this.time(),
			r = t < time;
		r && !reversed && (!onlyAfterComplete || time === this.duration()) && func.call(this);
		time = t;
		reversed = r;
	};
}

Usage:

gsap.to(... {onUpdate: onReverse(myFunc), ...});

I added a parameter in case you only want it called when the playhead moves from the VERY end (onlyAfterComplete). By default, it'll fire the function whenever the playhead starts going backwards anywhere (like if it's halfway through playing forward and gets reversed, it'll fire). 

// only if the playhead starts moving backward after having completed
gsap.to(... {onUpdate: onReverse(myFunc, true), ...});

Here's a quick & dirty demo (watch for the console.log() info):

See the Pen 4f7e274b19f0228d2873c3e6f0032faa?editors=0010 by GreenSock (@GreenSock) on CodePen