Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Mrgpicasso

ShockinglyGreen
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Mrgpicasso

  1. Thanks for you assistance and the valuable info for Next JS devs. I just notice I was doing a bad usage of killing animatios since the return step was inside the function and not for the useEffect hook, so it was never triggered as well.
  2. 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])
×