Use dynamic variables when creating animations

[strnadj]

Iam trying to create quite complex animation in GSAP and I really need persist / dynamic left css animation, I try several things like array with offsets, function (with current context) instead of value, but it seems they don't accept it...

As you can see later on codepen, problem is in this part of code:

/** Switch two items */

tl.to(elArray[left], 1, { left: elArray[right].offset().left });

tl.to(elArray[right], 1, { left: elArray[left].offset().left });

Codepen demo is much more simplier than what i really want, but it shows problem well.

See the Pen LEQXam by anon (@anon) on CodePen

[OSUblake]

Hi Strnadj,

 

The problem is your array, which you are sorting in a for loop. By the time your first animation runs, you array is already sorted, so it's getting the offsets from the elements in the sorted array at those positions, and not their current positions. You need to keep the modification of your array in sync with the animations.

 

Another problem is that in the second line of the code above, you are trying to get the offset of the left item after it's already moved to a new position. You should record their positions before the animation.

 

This should help you out.

See the Pen emVbMM by osublake (@osublake) on CodePen