How to continue animation from previous timeline animation?

[Suraj321]

I have a little grasp with gsap animation not so much In the code if you see there's a div called red. I have 2 animation with same div(red), I want the 2nd animation to start wherever the 1st animation left off!! (current animation 1st- x position move 0 to 200,  2nd animation should start on 200 to 500, but its not the doing the same )

Thanks in advance!!

See the Pen by Suraj-Pandit-the-looper (@Suraj-Pandit-the-looper) on CodePen

[Cassie]

Hi there!

 

You probably just need one timeline with a ScrollTrigger and two tweens?

See the Pen eYXJZvJ?editors=0010 by GreenSock (@GreenSock) on CodePen

Something like that.

[Suraj321]

Thanks for quick reply @Cassie , this was the initial thought but I want 2nd animation to start on different start point!! How can I acheive that?

 

[PointC]

If you want to use two separate tweens each with a ScrollTrigger, you can add immediateRender:false on the second one.

 

See the Pen 0a38dd989e8bc89274ad12a63919ea1c by PointC (@PointC) on CodePen

[Suraj321]

Thanks @PointC for the help this is exactly what I was looking for!! One noob question does this work with If I add more timeline with same div?

[Suraj321]

yeah its working with more timeline too thanks again!!!!🔥