Jump to content
Search Community

ScrollTrigger not working in sveltekit project

Vinciola test
Moderator Tag

Recommended Posts

Hi everyone,

 

I'm new to gsap and i just started yesterday, I'm using sveltekit and vite for my project just so i can get comfortable with using gsap in my svelte projects,

Normal gsap animations work in my project but for some reason the scrollTrigger doesn't below are images of my code and the error it outputs please how can i solve this

Screenshot from 2022-08-14 23-38-53.png

Screenshot from 2022-08-14 23-39-51.png

Link to comment
Share on other sites

Welcome, @Vinciola!

 

You must be using the ES Module files in an environment that doesn't understand ES Modules. 

 

Try importing the UMD files instead by adding /dist/ to the paths like:

import {gsap}  from "gsap/dist/gsap";        
import {ScrollTrigger} from "gsap/dist/ScrollTrigger";    


Or you could simply use a <script> tag and pull in the *.min.js minified ES5 files. 

 

This thread might be helpful:

 

Link to comment
Share on other sites

54 minutes ago, GreenSock said:

Welcome, @Vinciola!

 

You must be using the ES Module files in an environment that doesn't understand ES Modules. 

 

Try importing the UMD files instead by adding /dist/ to the paths like:

import {gsap}  from "gsap/dist/gsap";        
import {ScrollTrigger} from "gsap/dist/ScrollTrigger";    


Or you could simply use a <script> tag and pull in the *.min.js minified ES5 files. 

 

This thread might be helpful:

 

@GreenSock thank you very much,

 

the script tag doesn't work in svelteKit for some reason i tried importing from the dist and it logs an error to the console

 

Invalid property scrollTrigger set to Object { trigger: div.w-[100px].h-[100px].bg-red-500.rounded }Missing plugin? gsap.registerPlugin() gsap-core.js:87:17

 

this is the error

Link to comment
Share on other sites

3 hours ago, Vinciola said:

Invalid property scrollTrigger set to Object { trigger: div.w-[100px].h-[100px].bg-red-500.rounded }Missing plugin? gsap.registerPlugin() gsap-core.js:87:17

That just means you forgot to register the ScrollTrigger plugin. 

gsap.registerPlugin(ScrollTrigger);

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...