Jump to content


Use dynamic variables when creating animations

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

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

Link to comment
Share on other sites

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

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