null

@OSUblake Thank you for your help. With your guidance we FINALLY got it working!!! You were right, I needed to refresh the Scrolltrigger when the animation going into the next page is done - or at least refresh once the next page is visible. Here is the demo. The coolest part is that I now know how to use ScrollSmoother inside CodeSandbox! Thank you very very very much.

@OSUblake Here is the CodeSandbox. Scroll down to see the ScrollTrigger animation on the navbar. Then navigate to another page through the links in the navbar. Then navigate back to the homepage and note that the ScrollSmoother is broken. Are you able to edit the codesandbox?

Wow, i did not realize that server icon was there on the side. I was just refreshing the simulated browser and also refreshing the actual webpage and it did not fix the error even when I reverted back to the original working code. That appears to have solved the issue! One issue down. Now I will port in my demo into the codesandbox.

Blake, your CodeSandbox starter is awesome and works fantastic. But I must be using CodeSandbox wrong because every time I add anything it breaks with an "Internal Server Error". It is not just when I add something to your CodeSandbox. This error happens with every single CodeSandbox I try to use. I have tried dozens over the last several days and I always get this error. CodeSandbox is really neat and I really really want to be able to use it. Can you please watch this video I recorded that shows me running into the error and let me know what I am doing wrong? Thank you very much for the help.

Blake, thank you for the CodeSandbox ScrollSmoother starter project! That is more helpful than I can express in words. I will now begin porting my demo into a fork of it.

Hi guys. Here is a minimal demo. Clone it or download the .zip and place the Club Greensock gsap-bonus.tgz at the root and do npm install(as described here). Then run npm run dev to run it. Scroll down and see how there is a Scrolltrigger animation on the navbar. Then, navigate to the page titled "parallax". This page has ScrollSmoother on it. The navbar ScrollTrigger animation does still work on this page. Now, navigate to another page. The ScrollScrolltrigger navbar animation is broken. Then navigate to another page and it works again! I have been troubleshooting this for a whole day and I cannot figure it out. Can anyone help me? If anyone knows how I can use ScrollSmoother plugin in a Codesandbox without exposing my Club Greensock .zip then I can create a Codesandbox demo so you don't have to install the npm packages locally. Thank you in advance. P.S. Scrollsmoother (and ScrollTrigger and all of GSAP) is AWESOME!

Hi @OSUblake Thank you for the speedy response. It worked!

I am a club GreenSock member and have been using GSAP inside Next.js with great results. However, when I try to use the Flip plug I get the following error: C:\dev\web-app-frontend\node_modules\gsap\Flip.js:12 import { getGlobalMatrix, _getDocScrollTop, _getDocScrollLeft, Matrix2D, _setDoc, _isFixed, _getCTM } from "./utils/matrix.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module at wrapSafe (internal/modules/cjs/loader.js:992:16) at Module._compile (internal/modules/cjs/loader.js:1040:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10) at Module.load (internal/modules/cjs/loader.js:941:32) at Function.Module._load (internal/modules/cjs/loader.js:782:14) at Module.require (internal/modules/cjs/loader.js:965:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.gsap/Flip (C:\dev\web-app-frontend\.next\server\pages\_app.js:1183:18) at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31) at Module../src/components/sidedrawer/sidedrawer.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:912:67) at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31) at Module../src/components/layout/layout.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:433:95) at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31) at Module../src/pages/_app.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:1058:87) at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31) at Object.0 (C:\dev\web-app-frontend\.next\server\pages\_app.js:1160:18) I am importing Flip as follows: import { gsap } from 'gsap'; import { Flip } from 'gsap/Flip'; gsap.registerPlugin(Flip); What am I doing wrong?