Jump to content
Search Community

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

yeisonvelez11 test
Moderator Tag

Go to solution Solved by GreenSock,

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 comment
Share on other sites

  • Solution

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