Jump to content
Search Community

ScrollSmoother (Club Greensock Plugins) and Vite

creativeg test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I'm trying to move most of my stuff from Webpack to Vite, I'm proficient in neither of them but. I've been having lots of problems, and have been unable to find a solution; I'm not able to register nor import ScrollSmoother — or any Club Greensock plugin. I've been back and forth between this forum, Vite's docs, forums, and the consensus is not many people are experiencing problems as it seems to affect mainly the paid plugins. I just created a new project as I found some thread mentioning that it worked for Vite 3 and up. Nothing.

 

1487933435_CleanShot2023-01-30at22_45_02.png.4fe3adb1a479e091b0d4bc41ab320104.png

 

I know this seems to be a Vite problem, but somewhere I also read there being a namespace problem that needed to be fixed for GSAP. I'm just tired of not finding anything, so is there any workaround to make GSAP and the Club Greensock plugins in Vite?

Link to comment
Share on other sites

So sorry to hear about the hassles, @jguillen. I have absolutely zero experience with Vite so I probably won't be able to help much, but I wonder if you've seen these threads: 

 

 

 

That error message you posted sounds like you're trying to use ScrollSmoother BEFORE you registered it. So make sure you call gsap.registerPlugin(ScrollTrigger, ScrollSmoother) before you try to do anything with those plugins.

 

More installation instructions: https://greensock.com/install (in case it helps). 

 

Perhaps @Rodrigo will have some other tips to share. 

Link to comment
Share on other sites

I just spent a couple of hours setting up a webpack template and I still have the problem from my previous screenshot, so it might just be that I suck at build tools. I'm importing GSAP as one would expect - in both Webpack and Vite.

 

import gsap from 'gsap'
import { ScrollSmoother } from 'gsap/ScrollSmoother'

 

I've also tried importing from dist and all.

Link to comment
Share on other sites

  • Solution

Hi,

 

Sorry but I have very limited experience with both Webpack and Vite. Sure I use them all the time when scaffolding a project but in the lazy way:

npm create vite@latest my-vue-app -- --template vue

npm create vite@latest my-svelte-app -- --template svelte

npm create vite@latest my-react-app -- --template react

I just don't mess around with the configuration or creating a whole new project from scratch.

 

It'd be great if you could create an example in Stackblitz or Codesandbox in order to have a better look or provide a public repo (don't include bonus plugins, use gsap-trial instead).

 

Happy Tweening!

  • Like 2
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...