Scroll Trigger and Pinning

[Bryan Griffin]

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.

See the Pen wvNZRjp by bryan-griffin (@bryan-griffin) on CodePen

[Rodrigo]

Hi @Bryan Griffin and welcome to the GSAP forums!

 

I'm not sure I follow 100% what you're trying to do, but maybe make each section you want to pin the height of the screen and give them an overflow hidden in order to simulate vertical scrolling like in this demo:

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

 

You can still pin the entire parent element if you want, but you should follow the approach of making each section's height the screen height (or smaller if needed) in order to move the content inside each section along the Y axis. Kind of this demo, but each section with overflow hidden and it's content moving along the Y axis to simulate scrolling inside of it:

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

 

Hopefully this helps.

Happy Tweening!

[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

[mvaneijgen]

Hi @Bryan Griffin I've simplified your demo a bit and have implemented the logic @Rodrigo suggested to show you what he means. 

 

If you give your sections the height of the window and move the content inside that section it's own height. Now the content in each section can be as much or as little as you want it to be. The sections don't need to be 100% of the window, but they need to have a fixed height and you need to move the content within that container, that is what makes the logic work

 

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

 

21 hours ago, Bryan Griffin said:

Another thing is i noticed that i have been repeatedly declare this gsap.to(), and i not sure will it affect the code performance.

Nope don't worry about it! GSAP is highly optimised, my philosophy is if it works it works! And I would worry about performance when it arises and don't try to optimises something when there isn't even an issue.

 

Hope it helps and happy tweening!