[Pin sections in one place without scrub or layer]

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

[Pin sections in one place without scrub or layer]

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

[Pin sections in one place without scrub or layer]

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

[Pin sections in one place without scrub or layer]

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 ?

[Pin sections in one place without scrub or layer]

I would be very thankful for every given hint

[Pin sections in one place without scrub or layer]

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

[Sticky photos realted to simple text in column]

Oh gosh, I think I understood that thrid argument does that instead of forth. So easy ! Thank you so much.

[Sticky photos realted to simple text in column]

Hi ! I am using gsap very occasionally for simple things and I sometimes have this kind of problems I can not pass through.

 

Every section in left column has corresponding div with img. Everything is working fine until I go back again (after I scrolled to very bottom). Now I want to reverse action (that's why I put "reverse" in toggleAction) but when i pass "end" marker my img changes. It's not behaviour I want - I would like it to change when it meets "start" or "end" (second one) to keep releation between left col and right.

See the Pen Yzxgqao by Pysilla (@Pysilla) on CodePen