GSAP CDN not working in javascript or html file

I am trying to animate some text by following a youtube video made by a guy named Gary Simon using GSAP.

I followed his instructions to the letter but nothing is moving. All he did was copy and paste the CDN for GSAP and CSSRulePlugin and I did the same but after telling my border to scale from 0 to 1 nothing happens. I slowed the video down to 0.5 to make sure I copied everything exactly but I can't find what I did wrong or if there is an extra step.

I tried typing npm install gsap and importing it but still nothing.

here is what I have in html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GSAP stuff</title>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <h1>Look at me, I'm a bunch of letters...</h1>
      </div>
    </div>
    <canvas id="bg"></canvas>
    <script src='https://code.createjs.com/1.0.0/tweenjs.min.js'></script>
    <script type="module" src="/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/CSSRulePlugin.min.js"></script>
    <script>
      import { gsap } from "gsap/dist/gsap";
      import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin";

      gsap.registerPlugin(CSSRulePlugin);

      const content = CSSRulePlugin.getRule('.content:before')
      const h1 = document.querySelector('h1') 
      const p = document.querySelector('p') 
      const tl = gsap.timeline() 

      tl.from(content, {cssRule: {scaleX:0}})
      
    </script>
  </body>
</html>

and here is my CSS stuff...

*
{
  margin:0;
  padding:0;
}
html,
body
{
  height: 100vh;
  overflow: hidden;
  margin: 0px;
  font-size: larger;
  color: white;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
}
.container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100vh;
    display: grid;
    place-content: center;
}

h1 {
  font-size: 2rem;
  width: 50vw;
  line-height: 5%;
  text-align: right;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex-basis: 0;
  flex-grow: 1;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.content {
  display: flex;
  gap:5em;
  padding-top: 3em;
  position: relative;
}

.content:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  border-bottom: 1px solid white;
  transform: scaleX(1);
}

Everything had been working the same as the video tutorial but GSAP doesn't work for me. Could there be something with the CDN?

Thank you please.

Solution

These three lines are for nodejs, we can't directly put them in browsers

import { gsap } from "gsap/dist/gsap";
import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin";
gsap.registerPlugin(CSSRulePlugin);

After removing those lines, make sure to include this (as you already did)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

That's enough (usually we include it in head tag)

Also, if you only want to scale an element, you don't need CssRulePlugin and timeline.

just add

gsap.from('.content', {scaleX: 0})

should work