Trying to make element stick to the bottom of section

[tylernorquist]

Hello,

 

I am working on the half circles at the bottom of this pen. They do what I want through the first few frames. When it gets to the end of the green section, I am trying to get the bottom of the half circles to align with the bottom of the green section and scroll up like it's connected to the bottom of the green section. Any help is greatly appreciated!

See the Pen eYXdoOg by tylernorquis (@tylernorquis) on CodePen

[mvaneijgen]

Hi @tylernorquist welcome to the forum!

 

I would create a separate ScrollTrigger for the circles and let GSAP handle all the pinning (setting the element to position: fixed) I've also removes some other CSS properties. 

 

There are still some small gaps, but that has probably to do with the image it self, or some paddings on the page. 

 

What I've done is moved the circles to the top of the HTML set position: absolute; to the bottom of the page, then it gets pinned by ScrollTrigger and that ScrollTrigger also un pins it when the element with the class of .bottom, hits the bottom of the page (around the time the .green block is done). I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen MWxqvqR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[tylernorquist]

Wow! Thanks a ton!

[tylernorquist]

Another question... I am trying to place the circles behind the text. So between the background color and the text. I have tried everything with z-index and cannot get it to work. Any ideas? Thanks!

[GreenSock]

Sorry, but that's impossible with the way you structured your HTML. It has nothing to do with GSAP/ScrollTrigger - it's the fundamental way markup/CSS/browsers work. The text elements are INSIDE the <div> that has the green background, and your circles are outside that <div>, so you can't tell it to somehow sit inbetween those. You'll need to restructure your markup. Sorry, I don't have time to figure that out for you (we really try to stay focused on GSAP-specific problems here), but I'd recommend temporarily removing GSAP/ScrollTrigger from the equation just so you can focus on your layout. Get things to layer the way you want (so the green is in the back, circles are in the middle, and text is in the front) purely from an HTML/CSS standpoint. Once you've got that, THEN introduce GSAP/ScrollTrigger. 

 

Good luck!

[tylernorquist]

Hello!

 

This is about the z-index question from earlier and placing the circles behind the text. I noticed that when I set pin to false in the scrollTrigger, the z-index order worked and the text displays above the circles. When I set pin to true the text goes behind the circles.  Not trying to be a pain in the ass but just wondering if you know why this is. Thanks for your time!

 

I set up identical pens (except for the pin value), one with the top two sections not pinned and one with the sections pinned.

 

Not pinned: (you can see the text on top of the circles) 

See the Pen abMRzBx by tylernorquis (@tylernorquis) on CodePen

Pinned: 

See the Pen qBvJEqe by tylernorquis (@tylernorquis) on CodePen

[GreenSock]

4 hours ago, tylernorquist said:

I noticed that when I set pin to false in the scrollTrigger, the z-index order worked and the text displays above the circles. When I set pin to true the text goes behind the circles.

Are you only focused on the text that's on the WHITE background? Because the circles are on top of the green section text in BOTH demos you provided, right? 

 

When you pin an element, it must create a wrapper <div> to accomplish the pinning (otherwise, when position gets set to "fixed" the layout would collapse since the element is taken out of the document flow). So I assume the problem you're seeing is just the consequence of having it inside that wrapper <div>.  So if I were you, I'd tinker by putting that wrapper <div> around the element(s) I'm pinning and see if I could structure things accordingly such that I get the stacking order I need. It may not be possible given how you've got things built. 

[tylernorquist]

Thanks for your help!