Hi, i am having an issue on using the Flip plugin in React Js. I have a flip animation occuring in a page. When change the route i got always this message https://drive.google.com/file/d/1Ky2Xs-zR6ztoatou6FdpBVUkwC9pcfpz/view?usp=sharing
This is the piece of code when flips occurs
useEffect(() => {
let layouts = [styles.final, styles.plain, styles.column, styles.grid],
container = myRefs.current[0]
let curLayout = 0; // index of the current layout
function nextState() {
const state = Flip.getState(myRefs.current.slice(1), { props: "color,backgroundColor", simple: true }); // capture current state
container.classList.remove(layouts[curLayout]); // remove old class
curLayout = (curLayout + 1) % layouts.length; // increment (loop back to the start if at the end)
container.classList.add(layouts[curLayout]); // add the new class
const animation = Flip.from(state, { // animate from the previous state
absolute: true,
stagger: 0.07,
duration: 0.7,
ease: "power2.inOut",
spin: curLayout === 2 || curLayout === 0, // only spin when going to the "final" layout
simple: true,
onEnter: (elements, animation) => gsap.fromTo(elements, { opacity: 0 }, { opacity: 1, delay: animation.duration() - 0.1 }),
onLeave: elements => gsap.to(elements, { opacity: 0 })
});
var tween = gsap.delayedCall(curLayout === 0 ? 3.5 : 1.5, nextState);
return () => {
tween.kill()
animation.kill()
};
// if (puzzle && (!puzzle.nextPuzzle) && curLayout === 0) {
// gsap.killTweensOf(nextState);
// }
}
gsap.delayedCall(1, nextState);
}, [myRefs])
