How to uninterrupt the flip animation?

[ashura]

I wanna uninterrupt the flip animation that's it just a simple problem but I cannot find to not interrupt but can't do it anyone care to explain? 

https://codesandbox.io/s/lively-snowflake-uno0rn?file=/src/styles.scss

[Rodrigo]

Hi,

 

I don't see any Flip animation happening in your setup, because right now you're not targeting all the properties that are being updated. Also I spotted a few things that you should consider.

1. Always use GSAP Context when working with React environments.
   https://greensock.com/docs/v3/GSAP/gsap.context()
2. Always use React's events instead of adding event listeners. It's safer and React will clean those event handlers when/if the component is unmounted.
3. Don't store variables in the global scope of your components, because a re-render will reset those. For a boolean either use state or a ref.

Flip.from returns a GSAP Timeline instance so you can store it in a ref. This seems to work the way you expect:

export default function App() {
  const boxRef = useRef();
  const flipAnimation = useRef();
  const ctx = useRef(gsap.context(() => {}));

  const clickHandler = () => {
    ctx.current.add(() => {
      const state = Flip.getState(boxRef.current, {
        props: "width,height, background",
      });
      boxRef.current.classList.toggle("enlarge");
      flipAnimation.current = Flip.from(state);
    });
  };

  useEffect(() => {
    return () => ctx.current.revert();
  }, []);

  return (
    <div className="App">
      <div className="composition-component">
        <div className="box" ref={boxRef} onClick={clickHandler}>
          Sky Balls Lopserum Madya
        </div>

        <div className="parentBox">
          <div className="parentBox1"></div>
          <div className="parentBox2"></div>
        </div>
      </div>
    </div>
  );
}

Then you can use flipAnimation.current to kill, pause, revert, etc. the timeline returned by the from() method:

https://greensock.com/docs/v3/GSAP/Timeline

 

Hopefully this helps.

Happy Tweening!

[ashura]

Thanks I didn't saw your solution. Rodrigo does the ctx.current.revert() always only get called one time or it depends on what are you working different timelines? 

[Rodrigo]

Hi,

 

That will depend on how your useEffect/useLayoutEffect is setup as described in the React docs:

 

https://react.dev/reference/react/useEffect#my-cleanup-logic-runs-even-though-my-component-didnt-unmount

 

Hopefully this helps.

Happy Tweening!