How to get this flip animation working in react using useGSAP

[wayz]

https://stackblitz.com/edit/react-942bze?file=src%2Fstyle.css

 

Having a little trouble with useGsap hook.I am not able to make the flip animation work using useGsap otherwise it works fine.

[GSAP Helper]

Which file should we be looking at? You are sharing the file styles.css, which of course does not have any GSAP code. 

 

When sharing a Stackblitz link, please include in which file we should be looking for the GSAP code you've wrote.

[wayz]

Extremely sorry ! Please see this new link

 https://stackblitz.com/edit/react-942bze?file=src%2FApp.js,src%2Findex.js

I've commented out the part to make it easier to find in App.js.

[Rodrigo]

Hi,

 

There are a few issues with your demo, the one that causes the biggest problem is this:

.event-1[data-grid='img-1'] {
  grid-area: img-1;
  /* z-index: 1; */
  cursor: default;
}

.event-2[data-grid='img-2'] {
  grid-area: img-2;
}

.event-3[data-grid='img-2'] {
  grid-area: img-3;
}

.event-4[data-grid='img-4'] {
  grid-area: img-4;
}

With those styles the grid will only work only for those specific classes. As soon as you change the dataset value for the main image and the click target those classes won't work anymore. It has to be like this:

.event[data-grid='img-1'] {
  grid-area: img-1;
  /* z-index: 1; */
  cursor: default;
}

.event[data-grid='img-2'] {
  grid-area: img-2;
}

.event[data-grid='img-2'] {
  grid-area: img-3;
}

.event[data-grid='img-4'] {
  grid-area: img-4;
}

Then your code is being created before the elements are rendered in the DOM when you do this:

let events = gsap.utils.toArray(".event");
let active = events[0];
events.forEach(el => {
  el.addEventListener("click", () => changeGrid(el));
});
function changeGrid(el) {
  if (el === active) return;
  let state = Flip.getState(events);
  active.dataset.grid = el.dataset.grid;
  el.dataset.grid = "img-1";
  active = el;
  // Flip.from(state, {
  //     duration: 0.3,
  //     absolute: true,
  //     ease: "power1.inOut"
  // });
}

Running this code in the global scope of a React component will execute before the return statement that actually renders the elements on the DOM, so the events variable is just an empty array, so nothing will happen. In react you have to use effect hooks for that in order to ensure that the elements are rendered in the DOM. We have a useGSAP hook that simplifies this quite a bit:

https://gsap.com/resources/React

 

Here is a port of that particular demo in React:

https://stackblitz.com/edit/react-w54qpa

 

Finally I strongly recommend you to read and practice more about React, since the problems you had are not GSAP related, but more related with HTM/CSS/JS and the way react works.

 

Hopefully this helps.

Happy Tweening!