Jump to content
GreenSock

Patrick Artof

React TypeError (gsap, object is not extensible)

Recommended Posts

I'm having some trouble moving into React (i'm actually building on my website to Gatsby). I have a menu animation that's pretty much working fine, except for one part. I'm animating the menu on open and close. I've moved the animations into dedicated functions so it's clearer (and reusable) for me.

 

I've got 3 functions right now. The first two (`staggerReveal()` and `fadeInUp()`) works great. But the third one (staggerText) makes it crash and throw the following error : "TypeError: Cannot add property __gsap, object is not extensible".

 

I've built this `staggerText()` function the same way i did for the other 2 functions, and they work fine. I can't find what i'm doing wrong with this function right here.. I'm assuming the error doesn't come from gsap but from the `<Link>` ? Maybe it doesn't work like this when you want to animate <Links> in React?

 

Here is my component code :

 

import React, { useEffect, useRef } from 'react';
import { Link } from 'gatsby';

import gsap from 'gsap';

const MainMenu = ({ state }) => {
  let menu = useRef(null);
  let revealMenuBackground = useRef(null);
  let revealMenu = useRef(null);
  let line1 = useRef(null);
  let line2 = useRef(null);
  let line3 = useRef(null);
  let info = useRef(null);

  useEffect(() => {
    if (state.clicked === false) {
      // close menu
      gsap.to([revealMenu, revealMenuBackground], {
        duration: 0.8,
        height: 0,
        ease: 'power3.inOut',
        stagger: 0.07,
      });
      gsap.to(menu, {
        duration: 1,
        css: { display: 'none' },
      });
    } else if (state.clicked === true || (state.clicked === true && state.initial === null)) {
      // open menu
      gsap.to(menu, {
        duration: 0,
        css: { display: 'block' },
      });
      gsap.to([revealMenuBackground, revealMenu], {
        duration: 0,
        opacity: 1,
        height: '100vh',
      });
      staggerReveal(revealMenuBackground, revealMenu);
      fadeInUp(info);
      staggerText(line1, line2, line3);
    }
  }, [state]);

  const staggerReveal = (node1, node2) => {
    gsap.from([node1, node2], {
      duration: 0.8,
      height: 0,
      ease: 'power3.inOut',
      stagger: 0.1,
    });
  };

  const fadeInUp = (node1) => {
    gsap.from(node1, {
      y: 60,
      duration: 1,
      delay: 0.2,
      opacity: 0,
      ease: 'power3.inOut',
    });
  };

  const staggerText = (node1, node2, node3) => {
    gsap.from([node1, node2, node3], {
      duration: 0.8,
      y: 100,
      delay: 0.1,
      ease: 'power3.inOut',
      stagger: 0.1,
    });
  };

  return (
    <div ref={(el) => (menu = el)} id="main-menu">
      <div
        ref={(el) => (revealMenuBackground = el)}
        className="menu-secondary-background-color"
      ></div>
      <div ref={(el) => (revealMenu = el)} className="menu-layer">
        <div className="menu-projects-background"></div>
        <div className="container">
          <div className="menu-links d-flex jc-space-between ai-start">
            <nav>
              <ul>
                <li>
                  <Link ref={(el) => (line1 = el)} to="/">
                    Homepage
                  </Link>
                </li>
                <li>
                  <Link ref={(el) => (line2 = el)} to="/about">
                    About
                  </Link>
                </li>
                <li>
                  <Link ref={(el) => (line3 = el)} to="/contact">
                    Contact
                  </Link>
                </li>
              </ul>
            </nav>
            <div ref={(el) => (info = el)} className="info">
              <h3>Infos Box</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainMenu;

 

Link to comment
Share on other sites

So i've found this thread on stackoverflow https://stackoverflow.com/questions/59449554/correct-way-to-pass-useref-hook-to-ref-property

The answer worked for me. I've refactored my links like this 

<Link ref={line1} to="/"

 

Then i've used `.current` on my variables when calling them in my staggerText function like so :

staggerText(line1.current, line2.current, line3.current);

 

I'm not sure to understand how this works, but it fixed my error!

  • Like 1
  • Thanks 1
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.
×