React Flip Grid Animation

[Grim95]

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:  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...

See the Pen bGOXwOX?editors=1111 by dotmak (@dotmak) on CodePen

[Rodrigo]

Hi,

 

There are two issues in your setup.

 

First, you are creating and reverting a GSAP Context in your effect hook, but the function you are using is not actually returning a GSAP instance, therefore the Flip animation doesn't get reverted when the GSAP Context instance does.

 

Two, you have a tween with a ScrollTrigger configuration in it, on a timeline that also has a ScrollTrigger configuration, that's a big logical issue as explained here:

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[Grim95]

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.

 

 

 

 

[Rodrigo]

Hi,

 

I'm getting a 404 with the GitHub link.

 

We have a collection of starter templates for NextJS & GSAP here:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

You can fork one of those or create a minimal demo (no need to fork your entire project, just the relevant part or use just some colored divs to show the issue) using Stackblitz (free) in order to illustrate the problem you're having.

 

Happy Tweening!

[Grim95]

12 minutes ago, Rodrigo said:

Hi,

 

I'm getting a 404 with the GitHub link.

 

We have a collection of starter templates for NextJS & GSAP here:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

You can fork one of those or create a minimal demo (no need to fork your entire project, just the relevant part or use just some colored divs to show the issue) using Stackblitz (free) in order to illustrate the problem you're having.

 

Happy Tweening!

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 ! 

[Rodrigo]

We prefer a minimal demo (as small as possible) on Stackblitz rather than a full repo/project. Is faster and easier to debug.

 

Happy Tweening!

[Grim95]

1 hour ago, Rodrigo said:

We prefer a minimal demo (as small as possible) on Stackblitz rather than a full repo/project. Is faster and easier to debug.

 

Happy Tweening!

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 ! 
 

[Rodrigo]

Hey, I'm glad to read that it was solved, but I'm curious about the fact that it didn't worked as it should in development mode.

 

I'll dig into this at some point and post back with what I can find.

 

The only reason I can think for this not working is that at some point in your development environment you weren't using GSAP Context.

 

Finally read the resources in this page in order to learn how to use GSAP in React environments:

https://gsap.com/resources/React

 

Happy Tweening!

[Grim95]

24 minutes ago, Rodrigo said:

Hey, I'm glad to read that it was solved, but I'm curious about the fact that it didn't worked as it should in development mode.

 

I'll dig into this at some point and post back with what I can find.

 

The only reason I can think for this not working is that at some point in your development environment you weren't using GSAP Context.

 

Finally read the resources in this page in order to learn how to use GSAP in React environments:

https://gsap.com/resources/React

 

Happy Tweening!

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.