How can I access values of tween target?

[Donatello666]

Hi,

 

i have an array of html-object i want to tween. 

 

e.g: array = $('.test'); 

 

<div class="test"></div>

<div class="test"></div>

<div class="test"></div>

 

each object has values for tweening:

 

e.g. $('.test')[0]._newPosition.x;

 

Now  I want to stagger them and get the tween-values from itself like:

 

TweenMax.staggerTo( $('.test'), 1, { x: {currentTween}.target._newsPosition.x, y: {currentTween}.target._newsPosition.y }, .02);  

 

Is this possible and if how?

 

THX...

[mikel]

Hey @Donatello666,

 

Welcome to the GreenSock Forum.

 

Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through.

More info: Stagger effects with cycle

 

See the Pen qeoMZM by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[Donatello666]

Hi mikel,

 

thanks for your solution. I already thought about that. The only point why i would not like to use this is:

 

each of my DIVs has the values stored inside. To use your approach i first have to iterate through the DIVs and fill the array and then tween them and i would like to do this without this extra step. 

 

I thought: "OK, if GSAP iterates through my DIVs to tween them, i could get the tween values in the same step".

 

But I will give it a try, its the best way so... THX a lot! ?

[GreenSock]

How about this, @Donatello666? 

 

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

 

TweenMax.staggerTo(".box", 2, {
  stagger: 0.5,
  x:function(index, target) {
    return target.getAttribute("data-x");
  }
});