Cannot read properties of null (reading '_gsap')

[Mrgpicasso]

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])

Also, i did the effects copying from this example


How i say, when change the route that error appears

See the Pen eYdyVVe by GreenSock (@GreenSock) on CodePen

[OSUblake]

Welcome to forums @Mrgpicasso

 

Did you register the plugin? And for next.js you might need to import from the dist folder unless you enable module transpiling.

import { gsap } from "gsap/dist/gsap";
import { Flip } from "gsap/dist/Flip";

gsap.registerPlugin(Flip);

 

And here's a demo of Flip and React.

See the Pen MWmqzjE by GreenSock (@GreenSock) on CodePen

 

If you need more, please provide a minimal demo. Here's a next.js template you can fork.

https://codesandbox.io/s/gsap-nextjs-starter-jekrn?file=/pages/index.js

 

For the bonus plugins like Flip, switch the package from gsap to gsap-trial, like here.

https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln?file=/src/App.js

 

 

[GreenSock]

Yeah, I'd recommend trying a console.log(this.element) right before that line that's throwing the error because I suspect that maybe it's not what you think it is. Are you sure it's a DOM element? 

[Mrgpicasso]

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.