chimp1nski

Oh man I am starting to feel like one of those guys that somehow isn't able to browse the docs correctly and just asks questions that have already been answered years ago ? I'm truly sorry for that @OSUblake I really hope your not too annoyed of me already

Hey, @OSUblake I didn't mention that I already tried importing from "gsap/all" because I read it in a different post. Unfortunately Next throws an Error Server Error SyntaxError: Cannot use import statement outside a module So my guess is that `/all` doesn't export esm (?) From what I can tell theres no "gsap/dist/all"? For me it's totally fine to just import each module on it's own.

Nvm, I forked the "final demo" from null which is missing the cleanup you provided in your example. Unforunately the sandbox you provided in the post you mentioned threw a runtime exception switching routes as well (smoother instance in the cleanup was undefined). I think I fixed in this fork. Or at least it's a demo that works (for me) as intended (I guess). GSAP ScrollSmoother + Next.js (starter) (forked) - DEMO - CodeSandbox I am not too sure if this is the correct way to use gsap with Next / React but I searched far and wide to find a starter project / post about best-practices and this thread is the closest I could get.

@OSUblake <offtopic> I started a project with SvelteKit but now switched back to React and Next.js since SvelteKit is just too much of a beta still. I love Svelte and SvelteKit and it's frustrating that I am not able to use it in production yet. </offtopic> Anyways, Now that I started adding gsap to the Next.js / React project, I can confirm, that the .js file extension is not needed there. So yes, It seems like this is actually a SvelteKit / Vite issue. I think it's kind of the wrong place to discuss it but i'd love to be able to import like this: import gsap, { ScrollTrigger, ScrollSmoother } from "gsap"; But honestly it really doesn't matter and the docs actually do a great job explaining how to import correctly.

For anyone passing by in the future. There is a minor issue with the CodeSandbox example, where the "Jump to C" button stops working after navigating to a different route and back. Calling the refresh() method of ScrollTrigger when executing the scrollTo callback fixes this. I don't know if this is the best solution since I am a newbie myself. Maybe @OSUblake is able to confirm this? pages/index.js L:26 function scrollTo() { ScrollTrigger.refresh(); smoother && smoother.scrollTo(boxC.current, true, "center center"); } Happy coding, chimp

Hey @csellis I had some minor issues with Netlify too. The solution for your problem is provided in the logs on the second line. 6:18:51 AM: Did you mean to import gsap/dist/gsap.js? The funny part is you literally need to provide ".js" in the import. For me this works fine. Deployed on Netlify: import { gsap } from 'gsap/dist/gsap.js'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'; It's really odd and definitely counter-intuitive. Don't think it's a Netlify / Vite issue though. I used a lot of different tech and gsap is the only library where this was an issue. I think somewhere in the forums is a post about import and export and from what I've read they are thinking about maybe rethinking the exports. BUT it's definitely not gonna be implemented before next major release (4.0) since it most certainly introduce breaking changes. Anyways hope this helps.

Hey @null and @OSUblake. Thanks a bunch for figuring this out. I am currently in the research phase for a new project we kicked off yesterday. Your example basically answered all of my open questions for solving animation and page transitions in next. I gotta say it really feels good seeing an engaged community and support team working together to create awesome projects. Kinda forgot how that felt. Totally worth the money. Thanks a lot!

Hey. Don't know if this is resolved yet. I ran into some minor issues on Netlify. Was easy to resolve though and shouldn't be too different on vercel. 1. You need to add the generated gsap authToken to a ".npmrc" file in your repository root. Now in order to not leak your GSAP key, you should put it in an environment variable (NPM_TOKEN). You should be able to access this token in the .npmrc via ${NPM_TOKEN} like in the example here: //npm.greensock.com/:_authToken=${NPM_TOKEN} @gsap:registry=https://npm.greensock.com This could vary a bit for the business license but should be explained on the gsap installation page. Important: Don't forget to add the variable to Vercel where you actually add your gsap key. This could vary a bit on Vercel but I am pretty sure if you search the web for "Vercel .npmrc env variable" you'll find something. 2. I had some issues with the imports not working where the solution was to import from the dist folder. Oddly enough you need to add .js at the end of the import - it won't work otherwise. Here's an example of my imports that actually work: import { gsap } from 'gsap/dist/gsap.js'; import { ScrollSmoother } from 'gsap/dist/ScrollSmoother.js';