Jump to content
GreenSock

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

Cannot read properties of null (reading '_gsap')

Go to solution Solved by Mrgpicasso,

Recommended Posts

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
gsap.thumb.jpg.b191d3b6cd32df98068021428602b28d.jpg

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

Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

  • Solution

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. 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×