TweenMax two element same time but different value?

[paro 2 Likes (Newbie)]

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

[mvaneijgen 1,555 Likes (Superhero)]

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.

[PointC 14,185 Likes (Superhero)]

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.

[paro 2 Likes (Newbie)]

@mvaneijgen @PointC
Thank you for your helps, i've update GSAP syntax. This is how i've changed the code and it works for me.
 

See the Pen GRQJGvZ by tw_parodia (@tw_parodia) on CodePen