Scroll Trigger not stopping at end point and continue resizing the section

[Sandy Choudhary]

Hello Guys,

while using scroll trigger iam getting  two issue when scroll trigger is at end point then  first-section-area  is continue resizing and not stopped width height mention [        width:'235px', height:'235px',] for same as well giving 2 vertical scroll too. 
What iam trying to achieve that when scroll trigger reached to end point first section should stop resizing then able to apply second scroll trigger for second-section-area.
 

Any help or reference is appreciated  

See the Pen ExzxOrz by Sandy-Choudhary (@Sandy-Choudhary) on CodePen

[GreenSock]

Welcome to the forums, @Sandy Choudhary

 

You should never animate the same element that you're pinning. Instead, just create a wrapper element that you pin instead: 

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

 

Is that what you're looking for? 

[Sandy Choudhary]

Hi, @GreenSock Thank you very much to pointing me 
Okay i have updated the demo according to your suggestion but still iam facing the second issue when i initialize the second scroll over  [second-section-area] then first scroll trigger is too scrolling up. can you suggest any reference or guide how to proceed for same. so that  first section should be there and second section should start work as defined in scroll trigger.

[GreenSock]

I read your post several times and I don't understand what you're asking, sorry. I'm not sure what you're trying to do. You seem to have .info-content-right stuff that has a width of 100% which ends up being 0 (check dev tools), so none of it would be visible anyway. I'm just completely lost about what you're trying to do, sorry. 🤷‍♂️

[Sandy Choudhary]

@GreenSock

I have created another demo but don't know why its not working here as expected. here iam sharing a video link of same code over my local what i want when the second section is start then first section is too going with the scroll trigger in upward direction it should be stopped in middle when second scroll trigger is initiated however i managed to keep one dummy div with opacity 0 and when second scroll started make first section opacity to 0 and the second section opacity to 1. But i want to know if gsap provide any function or something which can  perform the same section instead creating fake section and manage through hide and show.

Here is updated link of code pend for same ->   

See the Pen rNgVxbB by Sandy-Choudhary (@Sandy-Choudhary) on CodePen

https://www.loom.com/share/1ecaa8e278664a769118f389835256c7?sid=30a50ca2-6037-4c73-8b08-602d174d1db4

 

 

Hopefully this will help you out to understand what exactly iam trying to achieve

[GreenSock]

I read your description a few times and I still have no idea what you're asking, sorry. Maybe I'm just too sleep-deprived and someone else may understand, but I'm totally lost. 

[Sandy Choudhary]

Hi @GreenSock
okay no problem. thanks for your time