Content section doesn't pin properly when there's content above it

[xZorro_81]

Hi all!

 

How do I make the pinning and scrolling of a container work properly when there is content above and below it?

 

So the problem is as I scroll to the pinned content, it only gets pinned when it's half way through. It works fine if there's no content above and below the container (yellow box) but when there is, the scroll takes longer to pin and finish. And since the active state (red) depends on the scroll, that too doesn't work as expected, it starts before the container is pinned and ends while it's still pinned causing the items to have no active state towards the end of the timeline.

 

Also when I'm scrolling too fast, the items just go by very quickly. Is there any way to turn it into a step animation?

 

I'm guessing it has something to do with the `start` and `end` properties. But I'm having a difficult time figuring out how to fix this. Or is this even the right way to go about this?

 

Please view the example in fullscreen.

 

 

Thank you!

See the Pen LYXVExZ by zorromaster (@zorromaster) on CodePen

[mvaneijgen]

Hi @xZorro_81,

 

I've restructured your pen a bit how I would start working on this. You hardly need more than one ScrollTrigger to accomplish your goal, less is more! The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and will save a lot of headache when debugging. 

 

Here is an example with ScrollTrigger disabled for now. I've moved your ScrollTrigger logic to a timeline that controls the animation of the blocks and I've moved your forEach loop to only run on the tweens. Loops are great, but sometimes I like to manually write out my timeline, this will show you where loops occur in your code and will make it easier to optimize later (my philosophy is get it working first, worry about optimising later. Because if it's not working, there is nothing to optimise!)

 

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

 

And there is the same example with ScrollTrigger enabled 

 

See the Pen dyQooQQ by mvaneijgen (@mvaneijgen) on CodePen

 

 

Instead of working with loops you can also work with staggers. But here the same counts as before, get it working first, before optimising! Our own @Carl has a great tutorial about working with complicated straggers, which I find really insightful. It's hard to wrap your head around at first, but if you can master this skill it will really help you in your GSAP journey! 

 

My suggestion would be try getting a new version of the ground with the above tips and post back here when you're stuck. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Hope it helps and happy tweening! 

 

 

[xZorro_81]

hi @mvaneijgen 

 

thank you so much for the help! It is working perfectly!!! And thanks for the advice, I really do need to spend more time tinkering with it.