Jump to content
Search Community

Animation in variable trigger

EP9 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to store a smaller animation in a variable called "scaler." There is a 15 second banner animation happening around this, but scaler always fires immediately.

 

How can I store small animations in variables, so i can call play() and reverse() on them during a running timeline?

 

I can get it working by defining two separate animations, but this involves doubling the code, rather than just using play/reverse.

 

Thanks,

 

tl = new TimelineMax({
	paused: false,
	delay: 0.2,
	repeat: 0
});

// other longer animation happening here

var scaler = tl.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut});

main.addEventListener("mouseover", function() {
	scaler.play();
	console.log('scale up');

});

main.addEventListener("mouseout", function() {
	scaler.reverse();
	console.log('scale down');

});

 

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Hey EP9 and welcome to the GreenSock forums.

 

I'm confused: you are adding the tween (scaler) to a timeline that plays all the way through, but you're also wanting it to not play? What are you expecting to happen? Why are you adding it to tl in the first place?

 

Thanks for the welcome and bearing with my question. I will try and explain more:

 

- I have a 15 second banner animation and on the left hand side is a "separate" small area I want to animate on hover

- On hover of the area I want to scale it using the values in "scaler" variable

- On mouse out I want it to played in reverse (scale back to normal) without duplicating another var with reverse values

- I want to keep this all in GreenSock and JS (no CSS) as the scaler variable will be used in other places

 

I can get this to work by creating a new instance of TimeLineMax as a separate animation/timeline, but I am wondering why this approach does not work and why the animation triggers instantly when assigned to a variable?

 

I can get the animation to not fire by changing "scaler" to:

 

var scaler = tl.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true });

But nothing else works (no mouse in/out)

 

Thanks,

Link to comment
Share on other sites

A minimal demo would make this a bit more clear I think. 

 

If you need the same animation to be used in two (or more) areas AND want them to be independent, you should create different instances of them. For example,

 

function createScaler = function() {
  return TweenMax.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true });
}

var scaler1 = createScaler();
tl.add(scaler1);

var scaler2 = createScaler();
main.addEventListener("mouseover", function() {
	scaler2.play();
	console.log('scale up');

});

main.addEventListener("mouseout", function() {
	scaler2.reverse();
	console.log('scale down');
});

That way you can keep your code DRY but also have two independent animations.

 

Does that help?

Link to comment
Share on other sites

20 minutes ago, ZachSaucier said:

A minimal demo would make this a bit more clear I think. 

 

If you need the same animation to be used in two (or more) areas AND want them to be independent, you should create different instances of them. For example,

 


function createScaler = function() {
  return TweenMax.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true });
}

var scaler1 = createScaler();
tl.add(scaler1);

var scaler2 = createScaler();
main.addEventListener("mouseover", function() {
	scaler2.play();
	console.log('scale up');

});

main.addEventListener("mouseout", function() {
	scaler2.reverse();
	console.log('scale down');
});

That way you can keep your code DRY but also have two independent animations.

 

Does that help?

 

Yep, that's got it... amazing!

 

What I'm still curious about is, why the variable method does not work, as we are just assigning this to another function now instead?

 

Thank you so much for your help – just trying to figure out why this doesn't work in my original code too.

 

EDIT: By changing the code to the following this now works (using TweenMax) instead of referencing my tl.to timeline

 

var scaler = TweenMax.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true });

 

Link to comment
Share on other sites

18 minutes ago, EP9 said:

Thank you so much for your help – just trying to figure out why this doesn't work in my original code too.

 

See the docs for timeline.to().

https://greensock.com/docs/v2/TimelineMax/to()

 

It returns the timeline (self), so you can do chaining. Your scaler and tl variables are pointing to the same object.

var scaler = tl.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true });

console.log("SAME", scaler === tl); // => true

 

  • Like 2
Link to comment
Share on other sites

3 hours ago, OSUblake said:

 

See the docs for timeline.to().

https://greensock.com/docs/v2/TimelineMax/to()

 

It returns the timeline (self), so you can do chaining. Your scaler and tl variables are pointing to the same object.


var scaler = tl.to(box1, 0.2, { scale: 2, ease: Sine.easeInOut, paused: true });

console.log("SAME", scaler === tl); // => true

 

Ahh that makes sense too – thank you.

 

Is it best/standard to store other animations to functions + variables using TweenMax or to just create another separate timeline instance?

 

I assume that will depend on the animation though, TweenMax for simple animations (like my quick scale) and TimeLineMax for another complicated timeline etc?

Link to comment
Share on other sites

53 minutes ago, EP9 said:

I assume that will depend on the animation though, TweenMax for simple animations (like my quick scale) and TimeLineMax for another complicated timeline etc?

Yes, it depends. Usually if you have sequences that depend on one another you should use a timeline. If there isn't any sequence, a tween is often better (unless you have a lot of different animations that aren't sequenced but you need to control them together).

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