ScrollMagic in Glitch

Hello, I am trying to use scroll magic in my project. My project is setup with express.js and I am writing the scroll magic code in the HBS file.
Heres a photo of my packages.json

Here is my js code

I have tried so many things and I cant get it to work I have tried downgrading, debugging, and linking all sorts of different packages, I have tried ChatGBT and googling I really have tried for hours. any help would be great thank you.

One issue I see if that you usually* can’t require a package on the frontend, so you should remove that line, as you already imported it in the script tag.

// Remove this! (unless you're using something like react or vue or webpack)
const ScrollMagic = require("scrollmagic");

Also, can you share your project name? It would really be helpful in diagnosing other issues.
heres the page and the name is shifting-gears-test-site
also removing that didn’t do anything.

I would like to thank you for your help however I found my issue was using var instead of let

I’d also like to mention some nice finds I had recently,
If you can handle es6 module imports


(mainly found this cause skypack does not work for monaco)
do some transformations on the fly so all you need to do is import the package name from their cdn.