[ScrollTrigger sidebar pinned overlaid sections]

Thank you so much @akapowl, this worked perfectly for my case

[ScrollTrigger sidebar pinned overlaid sections]

Thank so much for your help @akapowl @mikel. Your examples were very helpful and i have made some modifications to my previous example, it's almost finish but i have a new problem. The image in the last container does not stick while the text scrolls up. What do you think i should do to make that last image stick?

 

Here is my modified example: https://codesandbox.io/s/gsap-scrolltrigger-test-forked-fybvy?file=/pages/index.js

 

Again, thanks so much for your help

[ScrollTrigger sidebar pinned overlaid sections]

Thanks for your reply @akapowl Your example is really close to what i want to do, but i still don't know how to make it work. Want i'm trying to do is having a container with 4 h1 tags that shows at the same time that the container with the colored background but each h1 tag should appear individually as you scroll down like both containers were pinned. Should i try to make a third scrollTrigger instance? Thanks 

 

Here it is what i have so far https://codesandbox.io/s/gsap-scrolltrigger-test-zn36w?file=/pages/index.js

[ScrollTrigger sidebar pinned overlaid sections]

Hi, i want to do the same effect that @akapowl did in this codepen 

See the Pen 71b0d3b98ebd526c8abf2bb4b70ac702 by akapowl (@akapowl) on CodePen

 but in my case i would have 5 lines of text, and i want that each text line on the left have a fade in - fade out effect while the image is pinned. How do you think i should approach this case? I have made several attempts with no luck.

 

Thanks

[Scrolltrigger issue with react]

Thanks very much Rodrigo, that solved the issue when navigating away to another page, but now i'm having another problem when i go back to the main page the scrollTrigger is not working, i tried putting the ref on the dependency of the useEffect but it did not work.Also, sometimes if i refresh at the bottom of the page the scroll jumps right to the first element instead of the last one, what can be causing that? 

[Scrolltrigger issue with react]

Thanks Zach, i read about killing the instance but i'm not sure how to do that, maybe that's related to the other issue of the scroll going down to the last container. I'm going to play a bit and see if i go it working

[Scrolltrigger issue with react]

Thanks for your quick reply Zach, i read those post but i i don't know what's making my scroll fail, i tested on Chrome and Firefox on Windows 10. I setup another example here https://nextjstest-jf6ccnyrh.vercel.app/ if you scroll down and them you go up and click on hello it's going to send you to another page where you can't scroll down, but if you go back the scroll behaves weird. The code is still the same that on the codesandbox

[Scrolltrigger issue with react]

Hello everyone,

 

I'm new to gsap and i have been using ScrollTrigger for a few days trying to replicate the scroll effect on this website (https://katiforner.com/), i'm using this codepen as an example  but i get a weird behavior because the scroll does not always work right, sometimes it scrolls directly to the last container and when i switch to another page the scroll does not let me go down the page.

 

I'm using the last version of gsap 3.5.1 with NextJs.

 

Here is a code sample from https://codesandbox.io/s/ecstatic-black-4fdkp?file=/src/App.js

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