nkrs

Oh wow, thank you so much. That was indeed the issue and I completely missed the cleanup there. I've updated my original codesandbox with the corrected code in case anyone will find it useful. Edit: actually, I was being too optimistic too early. Apparently it fixes it for the most part, but the position and rotation still seem to bug out in some way when switching from mobile to desktop and vice-versa (e.g, sometimes it's too much to the left or the rotation isn't complete).

Ok thank you i have applied the suggestions and I think I actually just missed the variable in the dependency array of the useEffect only on the codesandbox, because locally I had it and it still worked. Anyway, I used gsap.watchMedia but the root issue persists. If I resize the window the layout breaks and I need to refresh it to bring it back to normal... I can reproduce it in your forked codesandbox as well... I just can't understand why this happens...

Unfortunately that link seems to not be valid (?)

Hi. I've been stuck on this issue for 3 days now. I went through all the docs, StackOverflow answers, gsap docs, codepens, gpt 4 answers etc, but I still can't figure out what is going wrong with my component. Maybe I'm just too stupid. Anyway. Here's the codesandbox (took me hours to figure out how to do this without bringing all the code and an entire nextjs app, so i just copied the styles and recreated the important components) https://codesandbox.io/s/lingering-pine-rkgr79?file=/src/components/FrontPageScene.tsx Unfortunately, i didn't use codepen. The animation should work as such: brain model moves left, then stays there for the entirety of the pinned element, then goes right when the footer appears. This works, but if you resize the window (not even fully to mobile) you'll notice that it starts to break and it doesn't recover. On mobile it should rotate the model, which doesn't work at all, but I'm guessing that's a threejs issue i also am trying to figure out.... It looks like when I resize, the pinned component "height" is completely ignored in the scrolltrigger calculations afterward. Any help would be super appreciated and i apologize if somehow i made dumb mistakes.