Bryan Griffin

I forgotten to mention that the the boxes count within each of the section will be different. The first demo that you were showing is almost what i wanted to achieve, just that i not sure how were you able to make the start of the animation being on top of every section regardless of how much you scrolled And the height of the section is based on how much boxes there is within each section-(n)-content-wrapper, which means the height of each section will not be the same This start is just staying there and its exactly what i wanted to achieve, but mine when i scroll down, the start of the animation it will move past the top of the next section , means it wont stay there. Then it will cause the animation to start even before the top of the screen touches the top of the section

Hi Friends, im trying to achieve this simple effects using scroll pinning and scroll trigger. So based on my codepen i have a div which holds 5 sections which i want to animate. So for my first section, when top of the viewport touches the top of the section 1 it will pin that section then the .section-1-content-wrapper will animate from left to right (this one is working as expected) Then when i continue to scroll to section 2, when the viewport touches the top of section 2 it will pin that section then the .section-2-content-wrapper will animate from bottom to top (this one is working as expected) Then when it comes to section 3, this one however gave me a little issue, whereby the start of the animation cant seem to stay at the top of the section 3, it will continue to move up and stick so near to the end of section 2 animation as i scroll down which is not what i want, i want it to stay at the top of the following section. Like the one when i scroll from section 1 to 2, the start of the animation will stick to the top of the following section. Basically aside from section 1 , i want the animation to be similar to section 2 which is moving the content from bottom to top for the rest of the sections Another thing is i noticed that i have been repeatedly declare this gsap.to(), and i not sure will it affect the code performance. I am really new to this GSAP animation, and this issue had me scratching my head. I hope you all could help me. Thank you so much.