Jump to content
Search Community

Passing {self} to function for new tween.

DeFrank test
Moderator Tag

Go to solution Solved by Carl,

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

First time poster here so apologies if this has been answered before. I searched around a bit but couldn't find an answer that worked.

 

I just started playing with Greensock a week or so ago (it's a blast, amazing job) and haven't been able to figure out how to animate a tween further after passing to another function via onComplete: <function> onCompleteParams:[{self}].

 

In the example below I want to animate each instance to white after they are complete. If anyone can have a look I'd appreciate it (the function in question is javascript lines 5-8).

 

See the Pen OXExRK by DeFrank (@DeFrank) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

Glad to hear you are enjoying GSAP!

 

Thanks for the demo. Looks like you are close. To reference the target of a tween in a callback do this:

var t = new TimelineMax();


TweenMax.staggerFrom(".box", 1, {scale:0.5, onComplete:boxComp, onCompleteParams:["{self}"], opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true}, 0.075);


function boxComp(tween){
  t.to(tween.target, 1, { backgroundColor: "#fff" })
};

http://codepen.io/GreenSock/pen/dXKmko

  • Like 7
Link to comment
Share on other sites

Little optimization tip. Your CSS is almost 1500 lines of code. You could drastically reduce that by creating your hue values in a loop. Here's how I calculate hue for a rainbow.

var hue = index / numItems * 360;

Although you have 360 elements, so that calculation works out the same.

See the Pen rLKdvq?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Little optimization tip. Your CSS is almost 1500 lines of code. You could drastically reduce that by creating your hue values in a loop. Here's how I calculate hue for a rainbow.

var hue = index / numItems * 360;

Although you have 360 elements, so that calculation works out the same.

See the Pen rLKdvq?editors=0010 by osublake (@osublake) on CodePen

 

Yeah, just used jade and sass to hammer out an example real quick. Thanks for your insight, though!

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