Swapping Flip bug element item between divs react.js

[ashura]

I'm trying to switch both sides when I click the start and then start the flips but the problem is that sometimes it is just switching on the other side without animation and no proper switch..it is just randomly get back to first position or opposite side without animation of flip... can anyone help me this one? I can't find the bug... Thank you for any help. 

 

Here is the codesandbox.io 

https://codesandbox.io/p/sandbox/flip1-forked-2wt7y5?file=%2Fsrc%2FApp.js%3A13%2C34

 

I don't know if it's here or wrong call in flip-id or what.. I missed 😅

 

  useEffect(() => {
    if (up) {
      if (!alternate) {
        gsapState.current = Flip.from(animState.current, {
          scale: true,
          absolute: true,
          zIndex: 2,
          duration: 2,
          ease: "power3.inOut",
          targets: [textState.current],
          onStart: () => {
            setisAnimating(true);
          },
          onComplete: () => {
            setisAnimating(false);
            setAlternate(!alternate);
          },
        });
      } else {
        gsapState.current = Flip.to(animState.current, {
          scale: true,
          absolute: true,
          zIndex: 2,
          duration: 2,
          ease: "power3.inOut",
          targets: [textState.current],
          onStart: () => {
            setisAnimating(true);
          },
          onComplete: () => {
            setisAnimating(false);
            setAlternate(!alternate);
          },
        });
      }
    }
  }, [up]);

 

[GSAP Helper]

Hm, when I try your link, it says: 

Quote

Sandbox not found
It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.

 

Can you please fix that? Or here are some React Starter Templates (please read this article!)

 

Also, it looks like you're not doing proper cleanup in React. Have you seen the useGSAP() hook? I'd strongly recommend that instead of useEffect(). It also seems odd to me that you're not capturing the flip state anywhere in your code excerpt. Typically a Flip animation follows 3 steps: 

1. Capture the current state with Flip.getState()
2. Make your changes
3. Flip.from(...)

I wonder if you're using a stale state object or something. Very difficult to tell without a minimal demo, but once you fix that link I'm sure it'll be more clear. 

[ashura]

thanks sir @GSAP Helper please see it again thanks for the help... haven't tried the useGsap() seems new to me but thanks will review it.

https://codesandbox.io/p/sandbox/flip1-vcttzd?file=%2Fsrc%2FApp.js%3A30%2C21

[ashura]

6 hours ago, GSAP Helper said:

Hm, when I try your link, it says: 

 

Can you please fix that? Or here are some React Starter Templates (please read this article!)

 

Also, it looks like you're not doing proper cleanup in React. Have you seen the useGSAP() hook? I'd strongly recommend that instead of useEffect(). It also seems odd to me that you're not capturing the flip state anywhere in your code excerpt. Typically a Flip animation follows 3 steps: 

1. Capture the current state with Flip.getState()
2. Make your changes
3. Flip.from(...)

I wonder if you're using a stale state object or something. Very difficult to tell without a minimal demo, but once you fix that link I'm sure it'll be more clear. 

found it... it is somehow related like this like you click and click it but mine is switching position that's simple but this code is a bit different of mine...so you can check it now in sandbox it is fix now the link... 
 

 

[ashura]

8 hours ago, ashura said:

I'm trying to switch both sides when I click the start and then start the flips but the problem is that sometimes it is just switching on the other side without animation and no proper switch..it is just randomly get back to first position or opposite side without animation of flip... can anyone help me this one? I can't find the bug... Thank you for any help. 

 

Here is the codesandbox.io 

https://codesandbox.io/p/sandbox/flip1-vcttzd?file=%2Fsrc%2FApp.js%3A9%2C20
 

I don't know if it's here or wrong call in flip-id or what.. I missed 😅

 

  useEffect(() => {
    if (up) {
      if (!alternate) {
        gsapState.current = Flip.from(animState.current, {
          scale: true,
          absolute: true,
          zIndex: 2,
          duration: 2,
          ease: "power3.inOut",
          targets: [textState.current],
          onStart: () => {
            setisAnimating(true);
          },
          onComplete: () => {
            setisAnimating(false);
            setAlternate(!alternate);
          },
        });
      } else {
        gsapState.current = Flip.to(animState.current, {
          scale: true,
          absolute: true,
          zIndex: 2,
          duration: 2,
          ease: "power3.inOut",
          targets: [textState.current],
          onStart: () => {
            setisAnimating(true);
          },
          onComplete: () => {
            setisAnimating(false);
            setAlternate(!alternate);
          },
        });
      }
    }
  }, [up]);

 

nevermind fixed it already 😅... I'm overthinking I should have just re-call the flip state... sorry it was a mistake...but the problem is the code a bit messy? is there a way to revised this code cleaner and no memory junks? 

 

    useLayoutEffect(() => {
        animState.current = Flip.getState( [textState.current] )
    },[])

    useLayoutEffect(() => {        
        // if (up) {
            gsapState.current = Flip.from(animState.current,{
                scale:true,
                absolute:true,
                zIndex:2,
                duration:2,
                ease: "power3.inOut",
                targets:[ textState.current ],
                onStart:() => { setisAnimating(true) },
                onComplete:() => {
                    setisAnimating(false)
                }
            })
        // }
    },[up])

    const handleSetUp = () => {
        if ( !isAnimating ) {

            animState.current = Flip.getState( [textState.current] )

            setUp(!up)
            setAlternate(!alternate)
        }
    }

 

[GreenSock]

17 hours ago, ashura said:

nevermind fixed it already 😅... I'm overthinking I should have just re-call the flip state... sorry it was a mistake

Good job figuring it out!

 

17 hours ago, ashura said:

is there a way to revised this code cleaner and no memory junks? 

Well I noticed you're not doing proper cleanup which is more of a React thing. I'd strongly recommend replacing useLayoutEffect() with the new useGSAP() hook because that handles a lot of the cleanup for you automatically. 👍

 

If you haven't done so, this is a good article to read: https://gsap.com/react