Jump to content


TweenMax two element same time but different value?

Go to solution Solved by PointC,

Recommended Posts

Hello there,

I am trying to achieve animate two element in same time but i want to give them different value for each.
The first element will move from the top to the center and the second element will move from the bottom to the center.


var tl = new TimelineMax({ repeat: -1, repeatDelay: 1 });
tl.to([up,down], 1, {y: (winsize.height/3)}); // i need negative value here for down element
Link to comment
Share on other sites

I see you are using the old syntax of GSAP. If you can I really recommend upgrading to the latest version, see for tips.


Also can you make a minimal demo to show us what you are trying to do? It can just be some colored divs because right now I have no idea what `up`, `down` or `winsize`  is or does, so it's hard to give you a solution.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • Solution

Yep - definitely upgrade to the GSAP3 syntax. Much easier. 


You can use separate tweens for that animation and add the position parameter so they start at the same time.


If you absolutely need them in the same tween, you can use wrap() for that. Something like this should work.

See the Pen def96988245998df9fe481f47f7d2335 by PointC (@PointC) on CodePen


Hopefully that helps. If you need more info, as @mvaneijgen mentioned, a minimal demo would be most helpful.


Happy tweening.

  • Like 2
  • Thanks 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.