Master React in Webflow - Libraries (GSAP)

/* --------------
    * -- npm scripts -- *
    npm install gsap @gsap/react

/* ----------- */
// index.js
import React from "react";
import ReactDOM from "react-dom";

// opted do do this here (you still need to import them in the files you use, just don't need to register the plugin).
import gsap from 'gsap';
import { useGSAP } from '@react-gsap';
gsap.registerPlugins(useGSAP);

import App from "./App";
const root = ReactDOM.createRoot(document.getElementsByClassName("react")[0]);
root.render(<App />);

/* ----------- */
// App.js
import React from 'react';
import PokemonList from './PokemonList';

export default function App() {
    return (
        <PokemonList />
    );
};

/* ----------- */
// PokemonList.js
/*
 * In this instance we are totally faking calling the Pokemon API
 * Just to show a delay/dependency in useGSAP
 */
import React, { useState, useRef, useEffect } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

export default function PokemonList() {
  const [pokemon, setPokemon] = useState([]);
  const listRef = useRef(null);

  useEffect(() => {
    let timeout = null;

    const getPokemon = () => {
      // after 1 second, set pokemon
      timeout = setTimeout(() => {
        setPokemon(["bulbasaur", "ivysaur", "venusaur"]);
      }, 1000);
    };

    getPokemon();

    return () => {
      if (timeout) {
        timeout.clearTimeout();
      }
    };
  }, [setPokemon]);

  useGSAP(
    () => {
      if (listRef.current && pokemon.length) {
        const listElement = gsap.utils.selector(listRef.current);
        const listItems = listElement("li");

        gsap.from(listItems, {
          opacity: 0,
          stagger: 0.05,
        });
      }
    },
    { scope: listRef, dependencies: [pokemon] }
  );

  return (
    <ul ref={listRef}>
      {pokemon.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}