Grim95

It was really weird but i made sure i followed all the steps to use GSAP in React Environment. Even the animation was playing in the inner items but not the first animation as supposed to. It seemed like the class removal was not working properly and the effect also remained after the class was removed ? Probably has something to do with React's re-render business. By the way, the link to the demo pages mentioned above doesn't seem to work.

Here's the StackBlitz link : https://stackblitz.com/edit/nextjs-za1qrw?file=pages%2Findex.js It works as it should, compared to the github project... Edit: I've also copied the exactly package.json in my project. It slightly fixes the grid for a moment and then returns to the full scaled imaged for some reason.. Edit 2: After some thoughts around it i decided to run npm run build and then npm run start and voila it works perfectly. I did all of that because i read somewhere that react runs twice or something like that in the dev mode, dunno if that solved the problem but i'm glad i found my salvaltion. Thank you so much Rodrigo for all your help !

Hi again, sorry for the 404, it was defaulted on private without me knowing. I know about Stackblitz, but after copying a fully working codepen to my clean react project without any results i started having trust issues. Let me know if you want it uploaded there or the git repo is alright. Thanks !

Hello Rodrigo ! Thank you so much for the clarification and for the solution provideded, it works like a charm on the codepen. A small issue i'm facing though is when i copy the code in the React+Next project, it doesn't seem to work like the codepen. The removed class seems like it is not removed. I've uploaded a clean React/Next github with the animation: https://github.com/dotmak/react-next-gsap/blob/main/src/app/page.js Here's a video of the bug: Veed.io Video link It seems to me like there's a weird delay when removing the class gallery--switch and doesn't refresh the grid ? Seems like a React or Next quick i don't know about. Thank you so much for your time.

Hello all, I'm trying to reproduce a flip animation i found on https://github.com/codrops/ScrollBasedLayoutAnimations/blob/main/js/index.js with React latest but for some reason i can't animate the flip. The gallery's inner items animate as they should but the flip state does not. I have created a pen here for showcase: https://codepen.io/dotmak/pen/bGOXwOX?editors=1111 and suddenly the flip animation works almost as i want it. Any insights as to why this happens ? In my project i don't even see the animation of the flipstate with the grid. Why does this happen ? Thanks for your time ! P.S: I know code could be cleaner, it's just that after 4-5 hours i've tried everything...

Thanks for your fast reply Zach, i'll study this pen and post for my results. The only limitation and time consuming thing is that i use WordPress so it'll take more time to adjust this in WP, i guess. Thanks again.

Hello everyone. First of all, congratz on this library of awesomeness. I can't describe how thrilled i am to start learning how to use GSAP. On our topic now, i've been looking for tutorials on how to create a pinned one-section/page that changes images and text on scrollmove Here's an example of what i mean: http://anml.com/ I've done some tweening but can't find any codepens on how to pin the section in order not to move at all, any ideas ? Thanks for your time, Grim95