Pin sections in one place without scrub or layer

[pysilla]

I wanted to achieve a feeling of scrolling red sections in one place. After scrolling whole height of first section we would go to the next red section and scroll its height as well, and so on until the end of sections. 

 

I am not sure what am I missing.

 

Demo:

https://codesandbox.io/s/still-dust-jn57ll?file=/src/App.js

[pysilla]

I would be very thankful for every given hint

[Rodrigo]

Hi,

 

Sorry for the late response. I'm not sure I follow your description of what you're trying to achieve.

 

Maybe something like this:

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

 

Also when using GSAP in React apps/environments we strongly recommend using GSAP Context for easy scoping and even easier cleanups:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally have a look to the resources in this page:

 

Hopefully this helps.

Happy Tweening!

[pysilla]

Thank you for the reply. I was thinking of something a bit else. I almost got to desired version here:

 

https://stackblitz.com/edit/vitejs-vite-dpegxw?file=src%2FApp.jsx,src%2Findex.css,src%2Fmain.jsx

 

But the animation triggers right from the top of screen and not when it reaches pinned section. Could you help me with that ?

[mvaneijgen]

Hi @pysilla after ScrollTrigger was created I put in the following line to see what was going on and saw you where creating multiple ScrollTriggers for each section.

 

ScrollTrigger.defaults({
  markers: true,
});

Personally I like to keep things simple. I already have a ScrollTrigger, so why not hook the animation to that ScrollTrigger, then I can just add all the tweens to that timeline and I'm done!

 

So that is what I did, I moved your on update function to be part of a timeline and with some fancy staggers I fade in and out each section on scroll.  I've set the end trigger to an arbitrary value of 5000px, but you could easily change that to something else (the height of the section times the number of sections, maybe), oh and I've set your main ScrollTrigger instance to scrub: true, so it animates based on the users scroll. Is something like that what you're looking for? Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/vitejs-vite-v38kcu?file=src%2FApp.jsx

[pysilla]

Thank you for your time, probably it could be a good alternative  

 

Like it's in the title of this thread I wanted not to use scrub

I  really wanted the exact same effect like in my demo, but the animation starts too late (starts at the begining of the page even if it should start when it reaches the pinned section).

 

Do you think you could give me sobie advice how to start animation when it reaches pinned section ? Thank you

[pysilla]

I would share modified version. Now I do not know why sections are not true for function 'isActive' at the first scroll down. On the other hand on scroll up everything seems to work fine. Do you have any ideas about it ?

 

https://stackblitz.com/edit/vitejs-vite-dpegxw?file=src%2FApp.jsx,src%2Findex.css,src%2Fmain.jsx

[Rodrigo]

Hi,

 

As @mvaneijgen mentions your current approach might be a bit more convoluted than it actually needs to be. On top of that you are creating a ScrollTrigger instance that is pinning the container of the panels before creating the ScrollTrigger instances for each panels, so basically that could be throwing off some of the calculations ScrollTrigger is making.

 

This approach seems cleaner and simpler:

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

 

Here is the same code but in a React app:

https://stackblitz.com/edit/vitejs-vite-s7gry6?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[pysilla]

Wow ! That was exactly what I was looking for. Guess I just complicated things up. Thank you