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> ); }

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?

I did try both npm install and yarn add. The error messages as below. After got 2 errors, I regenerate new Token again and try yarn add again. This time the error message of bad authorization header not show up anymore. But I got some messages about trouble in network connection. After 2 retries, the package install was done.

At the end, I couldn't yarn add the package, and end up with downloading zip file for gsap. That works for me, but when I tried to add @gsap/react package, I got same error again. This time, no zip file available for download. I tried to generate new Token again for the 3rd time. Somehow it works, but the network was very slow. I think the server might get some trouble to authenticate new Token, and get slow when download. If anyone has same issue, keep trying regenerate the Token and try again.

I have similar issue in my local Next.js project right now. The message always show "bad authorization header". I make sure to have .npmrc file on my project root with the token generated from website. Not sure what to do now. Where should I login again? on the website? $ yarn add gsap@npm:@gsap/business yarn add v1.22.17 [1/4] 🔍 Resolving packages... error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fbusiness: bad authorization header. Please login again".