Master React in Webflow - Libraries (Motion)

/* --------------
    * -- npm scripts -- *
    npm install motion

/* ----------- */
// index.js
import React from "react";
import ReactDOM from "react-dom";
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
 * Slightly different use of Motion here but wanted to achieve the same result
 */
import React, { useState, useEffect } from "react";
import { useAnimate } from "motion/react";
import { stagger } from "motion";

export default function PokemonList() {
  const [pokemon, setPokemon] = useState([]);
  const [scope, animate] = useAnimate();

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

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    if (pokemon.length) {
      animate("li", { opacity: [0, 1] }, { delay: stagger(0.05) });
    }
  }, [pokemon]);

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