Grid item view in React.js

[Supachai]

I'm new to GSAP and try to use it with Next.js (React.js). I understand Tween and Timeline, but still can't get my head around Flip. I want to make Grid item view just like the example, but with useGSAP in React. I still can't make it flip. Is there any similar example I can follow?

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

[Toso]

hi @Supachai is it possible to share your demo ? 

 

in case you need to create a new quick demo

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

 

[Rodrigo]

Hi,

 

I'm not in front of my computer now so I can't really go about what Flip does and how it works, I recommend you to check the docs for that:

https://gsap.com/docs/v3/Plugins/Flip/

 

We do have a couple of demos of Flip in react, here is a CSS grid transition:

 

https://stackblitz.com/edit/react-w54qpa?file=src%2FApp.js

 

Here is another using reparenting:

 

https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=package.json

 

Hopefully these demos help you getting started.

Happy Tweening!

[Supachai]

@Rodrigo Thanks for the references. I found the reparenting example might be the one I can follow. And now this is my version of reparenting.

 

'use client';

import { useEffect, useRef } from 'react';
import { Flip, gsap } from '@/lib/gsap';
import { useGSAP } from '@gsap/react';

const keys = [
  '2b332ab5-f515-4155-b018-c4508e56dbfa',
  '59e8855a-7bfe-4b8a-aa78-a0b7ec01da0a',
  'bafec336-11fc-49f3-9b01-b5650b34ec18',
];

export default function Page() {
  const containerRef = useRef<HTMLDivElement>(null!);
  const childRef = useRef<HTMLDivElement>(null!);
  const { contextSafe } = useGSAP({ scope: containerRef.current });

  useEffect(() => {
    const parents = gsap.utils.toArray<HTMLDivElement>('.parent');
    const parent = parents[0];
    if (!parent) return;
    parent.appendChild(childRef.current);
  }, []);

  const handleClicked = contextSafe((k: string) => {
    const state = Flip.getState(childRef.current);
    const parents = gsap.utils.toArray<HTMLDivElement>('.parent');
    const parent = parents.find((p) => p.dataset.key === k);
    if (!parent) return;
    parent.appendChild(childRef.current);

    Flip.from(state, {
      duration: 1,
      targets: [childRef.current],
      ease: 'power3.inOut',
      absolute: true,
    });
  });

  return (
    <div
      ref={containerRef}
      className="flex flex-row items-center justify-center w-full h-full gap-3"
    >
      {/* Parents inside the group */}
      <div className="flex flex-col items-center justify-center w-full h-full gap-5">
        {keys.map((k, i) => (
          <div
            key={k}
            data-key={k}
            onClick={() => handleClicked(k)}
            className="parent relative flex flex-col items-center justify-center w-52 h-36 border-2 border-white rounded-xl"
          >
            {/* <div className="guide invisible">Guide-{i}</div> */}
          </div>
        ))}
      </div>

      {/* Parent outside the group */}
      <div
        data-key="parent-outside-the-group"
        onClick={() => handleClicked('parent-outside-the-group')}
        className="parent relative w-1/2 h-96 border-2 border-white rounded-xl"
      ></div>

      {/* Child */}
      <div
        ref={childRef}
        className="absolute top-0 right-0 w-full h-full bg-blue-500/50 rounded-xl"
      />
    </div>
  );
}