TweenLite one element

[mat148]

Hey guys,

 

So i have this element that I want to animate x=50, then when thats done animate x=100.  I cant seem to make it work or figure out how people do it.  It seems to work if I animate the target, then animate another target, then animate the original target again.  

 

In the codepen im animating the .menu-button

See the Pen dPeVZy by mat148 (@mat148) on CodePen

[Jonathan]

Hello mat148, and Welcome to the GreenSock Forum!

 

You can try and remove your position parameter so your timeline plays in each tween one after the other:

 

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

 

Also here is a great video by GreenSock on Timeline Tip: Understanding the Position Parameter

 

Other resources that could help:

• Video: Sequence JavaScript Animations Like a Pro with GSAP's TimelineLite
• Jump Start: GSAP JS
• Getting Started with GSAP (GreenSock Animation Platform)

i hope this helps!

[mat148]

Thank you Jonathan I had no idea it was such a simple thing that I needed to change.

[Jonathan]

no worries, glad to help