Pin object within pinned object

[Sam Smyth]

Hi - I'm very new to GSAP, so I may be going about this issue incorrectly.

 

Here's my goal:

• When a user scrolls down and the "Test" text meets the middle of the viewport, this "Test" text should stay pinned in the middle of the viewport until it reaches the middle of the ".second" element
• When the text reaches the middle of the ".second" element, I want the text to stay in the middle of the ".second" element as the ".second" element is pinned to the viewport. 

 

The codepen is as close as I can get to what I want, but there are a few issues:

• The text jumps down to the middle of the ".second" element and oddly moves left when it should get pinned to the middle of the viewport and scroll nicely.
•  I need to be able to have the text start a little bit down from the top of the ".second" element. Similar to how you would add some padding if there was no animation. 

 

If you comment out the first half of my JS, you'll see that it works correctly besides the ".second" element not getting pinned (or having any padding) when it reaches the top of the viewport. 

 

Using this on my project, I'm running an animation timeline in the center of the ".second" element, but I don't want a large amount of empty space in the top half of this element as the user scrolls down until the ".second" element meets the top of the viewport (since the element is 100vh, there's a lot of empty space) - I want the user to see the text fairly near the element above so they don't think it's the end of the page.

 

Hopefully this makes sense! Thanks so much.

See the Pen VwbNYjx by ssmyth93 (@ssmyth93) on CodePen

[GreenSock]

It's super tricky when you try pinning multiple elements that are nested in each other - I think it'd be cleaner to just do a linear "y" animation to simulate pinning on that inner element like this: 

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

 

Is that what you were looking for? 

[Sam Smyth]

That's right! Thank you!

 

One last thing - how do I offset that text down a bit so it's not right at the top of the element? I tried a few ways (like simply adding margin), but it messes with the pinning position once scrolled down: 

See the Pen poPBWRr by ssmyth93 (@ssmyth93) on CodePen

[nico fonseca]

Hey @Sam Smyth !

You can use the fromTo animation to set the initial value.

Here is an example: 

See the Pen 00e1205933085f693b78e73ed75ebd22 by nicofonseca (@nicofonseca) on CodePen

[Sam Smyth]

Hmm, that's close to what I'm looking for, but it still shoots down the page as you scroll rather than staying pinned to the center of the viewport. It's almost like it starts animating a little bit late and has to catch up.

 

I'm looking to have it work just like Jack's example but have the "Test" text start a little bit down into the element rather than at the top. Any way I can do that?

[GreenSock]

I assume you're looking for something like this?:

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

 

That makes it dynamic, so you can add whatever margin/padding and it'll just figure out how far it needs to go to hit the center. 

[Sam Smyth]

@GreenSock That is exactly what I am looking for! I never would have thought of that, so I really appreciate the help. Cheers!

[GreenSock]

12 minutes ago, Sam Smyth said:

@GreenSock That is exactly what I am looking for! I never would have thought of that, so I really appreciate the help. Cheers!

No problem! Happy to hear it's exactly what you were looking for. 🙌

 

Enjoy the tools.