React + GSAP component example

README.md

This is scaffolding for a React component that can properly use GSAP. We setup a random class selector to pass to GSAP when the component is ready. This assumes also some TailwindCSS classes to provide the styling.

component.jsx

import React, { useEffect, useState } from "react";
import { gsap } from "gsap";
import random from "random";

export function AnimatedBackgroundHeading(props) {
  const defaultcomponentStateConfig = {};
  const [componentState, setComponentState] = useState(
    defaultcomponentStateConfig
  );
  componentState.updateValue = (key_to_update, value_to_update) => {
    setComponentState((prevState) => ({
      ...prevState,
      [key_to_update]: value_to_update,
    }));
  };
  useEffect(() => {
    // Setup a random class for this component, for GSAP to identify it.
    const uuid = "box-" + random.int(0, 100000000);
    console.log("Setting class up as " + uuid);
    componentState.updateValue("class", uuid);
  }, []);
  useEffect(() => {
    // Once we have a class, we can setup the GSAP animation.
    if (typeof componentState.class !== "undefined") {
      gsap.from("." + componentState.class, { duration: 3, scale: 4 });
    }
  }, componentState.class);
  return (
    <>
      <div
        className={
          componentState.class + " w-5 h-5 " + props.background_color ??
          "bg-green"
        }
      ></div>
    </>
  );
}

example-usage.jsx

<AnimatedBackgroundHeading background_color="bg-green-400"/>