Scroll Trigger Plugin Error

[kmaphane]

Good day,

I am using Laravel, Alpine and Livewire with GSAP.

This is my script

<div x-data="{}" x-ref="navWrapper" x-init=" () => { if (reducedMotion) return gsap.set($refs.navBackground, { autoAlpha: 0, }) gsap.set($refs.menuIcon, { autoAlpha: 0, yPercent: -100, }) gsap.set($refs.topIcon, { autoAlpha: 0, yPercent: -100, }) gsap.set($refs.navLogo, { autoAlpha: 0, yPercent: -100, }) gsap.to($refs.navBackground, { scrollTrigger: 'top 100vh', delay: 15, autoAlpha: 1, }) } " class="relative px-1 py-2 nav-wrapper md:px-2 lg:px-4">

I get the following error:

I have tried using both npm installation and cdn scripts but I land at the same error.

with npm my setup was as follows:

import { gsap } from "gsap"

import { ScrollTrigger } from "gsap/ScrollTrigger" import { PixiPlugin } from "gsap/PixiPlugin" import { TextPlugin } from "gsap/TextPlugin"

gsap.registerPlugin(ScrollTrigger, PixiPlugin, TextPlugin) window.gsap = gsap

I also get this error in the console

These are my dependencies:

"dependencies": { "gsap": "^3.12.2", "theme-change": "^2.5.0" }

Kindly advice.

[HassanZahirnia]

Hey, can try importing GSAP like below?

import * as ScrollTrigger from 'gsap/ScrollTrigger'

And try registering 1 plugin at a time.

gsap.registerPlugin(ScrollTrigger)

[kmaphane]

Hey, can try importing GSAP like below?

import * as ScrollTrigger from 'gsap/ScrollTrigger'

And try registering 1 plugin at a time.

gsap.registerPlugin(ScrollTrigger)

And just like that it works thanks. My excitement for GSAP is back