Chain 2 scrolltrigger animations with the same element pinned(

[amapic]

Basically, I would like to chain 2 animations with the same element pinned

If the first animation is limited by:

start: "center center",
    end: "+=900 center"

 

how can I start the second one as the center stays at the center ?

This won't work:

start: "center center",
    end: "+=900 center"

nor this:

start: "center+=900 center",
    end: "+=900 center"

I put in the codepen an example. After the black circles reach the center of the screen, I just would like any other animation to start with the ".flex" element staying at the same place.

Thanks for you help.

See the Pen RwYrpaV by amoP (@amoP) on CodePen

[GreenSock]

I think it'd actually be cleaner (if I understand your goal) to just use a Timeline: 

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

 

That way you can add as much animation as you want and it'll just have to pin that element once. 

 

But if you really need to separate them out and not use a Timeline (I doubt it), you can have one ScrollTrigger set its start position to the previous one's end position: 

See the Pen mdGVGGp?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[amapic]

That's it. Thank you. Sorry for not being clearer.