Moved pinned element before it pins causes jump

[rpsstudios]

I'm working on an animation where we have a 100vh height block that gets pinned and then we have a gradient bg that grows while it gets pinned. Since the current element is full-height I want to bring the next pinned section up underneath it before it gets pinned. I can get the first pin to work, and I can hug the next section up to it with a simple y animation. The catch is that this causes the next pinned element to jump once it hits the spot it was originally supposed to pin at. Is there a different way to handle this, or maybe I'm just asking too much.

See the Pen gOBbmKg by rpsstudios (@rpsstudios) on CodePen

[Cassie]

Hey there! If I understood correctly an option could be to pop it all into one timeline? Might be a little less confusing?

 

See the Pen oNagMBq by GreenSock (@GreenSock) on CodePen

[rpsstudios]

Hey @Cassie, both items need to be independently pinned, so I don't think a single timeline would work. My example gets me really close, it's just an issue that the first timeline won't adjust the pinning on the second element after it moves.

[GreenSock]

Yeah, the problem is that you're animating the very element that you're attempting to pin, so it throws things off. 

 

I'm literally in a car driving down the highway right now so I have very limited time to dig into this, but usually in a situation like this it's best to just create a container that you pin instead so that you're not contaminating things: 

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

 

I hope that helps.

[rpsstudios]

Thank you so much Jack! That definitely puts me on the right track.