Unable to pin the element while scrolling

[gsapmonkey]

Hi,

The requirement I have is to pin a circle element while scrolling. As I scroll, the sections inside the circle should change until all sections are exhausted. The sections need to be center-aligned. However, I'm facing an issue where the circle doesn't stop/pin in place and scrolls away.

Each section has different text. An example section is attached. I have a total of 7 sections.  

 

The code pen I attached as working example doesnt work at all, but just attached as reference.

But this is the codepen example I am trying to follow

See the Pen 0b5a30b2352ce90d92727a862259c476 by akapowl (@akapowl) on CodePen

 

The circles are absolutely positioned and the text sections too. 

 

Any ideas on how to approach this is greatly appreciated. I was trying many things but couldnt figure this out. Thanks in advance.

 

 

(The section needs to be in the center of the white circle and the circle should be pinned in place while scrolling till all sections are exhausted)

 

See the Pen oNOwjyw by codingchefs (@codingchefs) on CodePen

[mvaneijgen]

Your pen doesn't load GSAP nor ScrollTrigger, would be great if you could at least provide a pen that is working at that level. 

 

For the centring of things, just remove ScrollTrigger and GSAP and focus on your CSS, lay everything out as you want it. Only after that is done add GSAP back in. 

 

for you pin question, pin: true pins everything located inside your trigger element. Your trigger element doesn't contain your circle, so it doesn't get pinned. Instead of using your trigger element as the pin you could also change the pin: true to an element eg pin: ".wrap-all" which would pin everything because this does contain your circle. Hope it helps and happy tweening! 

[gsapmonkey]

Sorry, I forgot to add the gsap and scrollTrigger into the pen. But you got the issue and solved my problem. I din't understand the concept of pin before. Thanks for clarifying it. I moved the section that needs to change on scroll into the container that has circles and made the circle container a pin. Now it's all working.

 

Thank you so much for the help. I might have spent a good amount of my day figuring this out.