Kuro091

Thanks a lot for your help! ? Regarding the minimal demo I did (try to) provide one. https://codesandbox.io/p/sandbox/withered-shadow-zdcqr1?file=README.md This is the main driver code. RedSection is just a div with height: 100vh. Everything is written in OrangeSection with TailwindCSS. <section id="content-container" className={`bg-red-100 flex [&>*]:w-1/2`}> <div id="left-content" className="bg-pink-200 max-h-screen translate-x-0 relative [&>*]:absolute [&>*]:opacity-0 [&>*]:invisible" > <img id="img1" src="https://placekitten.com/1300/1300?image=1" alt="kitty" /> <img id="img2" src="https://placekitten.com/1300/1300?image=2" alt="kitty" /> <img id="img3" src="https://placekitten.com/1300/1300?image=3" alt="kitty" /> </div> <div id="right-content" className="flex flex-col bg-orange-900 [&>*]:py-[50rem] items-start text-5xl" > <p className="contentMarker" data-marker-content="img1"> Cat 1 </p> <p className="contentMarker" data-marker-content="img2"> Cat 2 </p> <p className="contentMarker" data-marker-content="img3"> Cat 3 </p> </div> </section> This is the setup (which I think is really readable). Then I put everything javascript in an useEffect() (pretty much copy-parsed from the original codepen). I really did try to reproduce it with as less code as possible. Regardless the problem is resolved so I'm not diving into this too much. On to other cool effects

I tried MatchMedia and the animation went poof as well. However I made it work! By changing context.kill() to context.revert(). By the end of this I've come to the conclusion I need to know more about the framework first to make it work. While it's working now it doesn't seem to be the correct solution

I was trying to make it responsive (i.e. work with any screens) so there were no breakpoints. Basically, I was trying to copy-parse the whole thing from the original codepen over to NextJs. CSS setup was the same as the original one. That was intentional. It just kinda made sense in my mind but yeah now I see there's really no reason to so I edited it to just include one useEffect just now. So I was trying more things to make it working and my findings is that: - If I leave the gsap.to() inside the gsap.context() then the scroll animation works, but not responsive - If I leave the gsap.to() out of it (essentially not using gsap.context()) then it's responsive (as in if I resize the screen then the width of both elements automatically change accordingly), but then the scroll animation stops working. Maybe because my approach was wrong. My end goal is just to convert the original sample to react code I'd appreciate any helps

Hey thanks for the reply! Oh sorry those were created with the scaffolder. I wasn't using any of it, but rather made use of tailwindcss in my code. I cleaned up that codesandbox just now and would really appreciate if you or anyone can take a look at it again. Everything relevant is written inside pages/index.tsx, and styles/globals.css is used for some basic css reset, nothing more. https://codesandbox.io/p/sandbox/withered-shadow-zdcqr1?file=README.md The gist of it is that instead of a block display with two children of 50% width like in the example, I want to utilize the grid display of two columns. Somehow when I did the switch, if you change the screen size the pinned element keep its width and not changing. The pin property just somehow adds fixed width to whatever element I point it to pin and I think that's the thing causing issue.

So um fixed it with wrapping it in context and use gsap.to() instead of ScrollTrigger directly. (I think using gsap.to() fixed it) I fixed it in the same codesandbox https://codesandbox.io/p/sandbox/withered-shadow-zdcqr1?file=README.md However now the pinned element isn't exactly responsive. Upon inspecting the element I find out that gsap adds fixed width, height, etc. to the pinned element, which causes the issue. Please help

Hello, I'm trying to recreate this effect, but use NextJS (so basically React). https://codepen.io/GreenSock/pen/YzyqVNe This is what I have so far: https://codesandbox.io/p/sandbox/withered-shadow-zdcqr1?file=README.md Apologies for the sandbox link as I'm not familiar with Codepen. As you see whenever the scroll hits the "start" point the images disappear immediately. I haven't even plugged in the onUpdate hook yet. This is the effect I'm trying to recreate: