Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yeisonvelez11

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

Recommended Posts

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

Link to post
Share on other sites

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

 

Happy tweening.

:)

 

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

@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

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

 

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

  • Like 4
Link to post
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.

×