Search the Community

Hi @all, thank you for this awesome library! Unfortunately, I am facing issues with the ScrollTrigger effect inside my nextjs production build. I hope you can help me. The ScrollTrigger effect works perfectly fine, when I start the nextjs project in development ("next dev"). However, when I build a production build and host the production build via a web server, the element to which the ScrollTrigger effect is attached to is not displayed from time to time. I created a simple codesandbox where you can reproduce the behaviour: https://codesandbox.io/s/nextjs-gsap-scrolltrigger-bug-qtgfl?file=/pages/index.js It works fine inside the codesandbox (development) but when built and deployed to a server https://csb-qtgfl-nml1dj1ep-andiwi.vercel.app/ the headline is not displayed from time to time. To reproduce go to https://csb-qtgfl-nml1dj1ep-andiwi.vercel.app/ and refresh the page multiple times until the headline is not displayed anymore. I followed the official resources https://greensock.com/react/ and https://greensock.com/st-mistakes/ and also read through forum posts like https://greensock.com/forums/topic/27012-scrolltrigger-and-array-of-refs-in-react/ but did not find a solution for the problem. I am new to gsap. Do you spot any wrong usage of the library? The same setup works in a simple react app (e.g. create-react-app). Would be great if you have any ideas how to solve this error. I am trying to solve the error for days now without any success and I am out of ideas. Thank you!

The demo can be seen here: https://bethebuzz.vercel.app/careers It's the second section after hero, with the Values box pinned on Scroll. It works, but I know that code is wrong. I just don't understand how to use it properly.

hi @Ev1lMush unfortunately, the demo is not loading but i would recommend using only scrollTrigger to do all your scroll-related animations for you, scrollControls was killing me also, and I didn't find a clear fix for making them both work together in most cases drei is great but still not enough to use it alone for everything something like where i was trying to make drei scroll and scrolltrigger work together but in the end, i only used scrolltrigger maybe its different in your case idk what you are building https://garden-self.vercel.app/ (Hit a refresh if it doesn't work it was a demo for testing so it's a mess and dusty) I am not R3F expert so keep looking for a solution that suits you also since you are using react you can check the new useGSAP() its a replacement for useEffect and useLayouteffect https://gsap.com/resources/React#usegsap-hook- and here are some templates you can fork one , for me its easier to work with React on stackblitz https://stackblitz.com/@GreenSockLearning/collections

Hi, The best course of action right now is to use React Transition Group as shown in this demo: https://stackblitz.com/edit/nextjs-13cw4u?file=Layouts%2FLayout.js,components%2FTransition.js,context%2FTransitionContext.js Due to the way this works, there is no need for the useGSAP hook in the transition component since those are one off animations that will be elegible for garbage collection after they're completed. Is necessary to point out that you have to use the pages router for this approach (animating in and out each page) since this is not possible with the app router regardless of the animation solution you use (Transition Group with either GSAP or CSS, Framer, etc). This is a known issue that hasn't been resolved in over a year by the Next team, nothing to do with GSAP, Framer or other libraries: https://github.com/vercel/next.js/discussions/42658 Here you can find a way to create overlay transitions (the pages are not animated, just an overlay animates over the layout) with GSAP using the app router: https://medium.com/@josiah.webdev/page-transitions-with-gsap-next-js-app-router-5508cee43a80 Finally you can stick with the pages router for simple static websites if you want to use the other way, there is nothing essentially wrong in using the pages router IMHO. Hopefully this helps. Happy Tweening!

Hi, I've built a React site with GSAP and LocomotiveScroll, and added a bunch of ScrollTriggers. Everything works fine and as expected in my local machine, however, when I deploy the site into vercel all the animations that were suppose to get triggered with ScrollTrigger immediately start animating as soon as the page loads. I've seen some other forums with the same problem, however, none of those solutions have worked for me like changing .from() into .fromTo() or calling gsap.registerPlugin(ScrollTrigger) inside useEffects() of every page with a ScrollTrigger animation or adding "lazy: false". I get a this below error in all the pages that has a ScrollTrigger: react_devtools_backend.js:2655 Invalid property scrollTrigger set to {trigger: '#main', start: 0, end: '+=50%', scrub: true, scroller: '#main-container', …}end: "+=50%"lazy: falsescroller: "#main-container"scrub: truestart: 0trigger: "#main"[[Prototype]]: Object Missing plugin? gsap.registerPlugin() ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- almost all of the pages with a ScrollTrigger has a code like this: const Skills = () => { useLocoScroll(); const mainRef = useRef(); useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { gsap.from("#curtain", { duration: 10, x: "-100vw", ease: Power4.ease, scrollTrigger: { trigger: mainRef.current, start: "top top", end: "bottom center", scrub: true, scroller: "#main-container", toggleActions: "play none none reverse" } }) }, mainRef) return () => ctx.revert(); }, []) return ( <> <div style={{position: "relative", overflow: "hidden"}}> <div style={{position: "relative", overflow: "hidden", height: "100vh"}} ref={mainRef}> <div className={styles.curtain} id="curtain"></div> <div className={styles.pageTransitionBlack} id="main"> <Navbar /> <Header headerText={"My Skills"}/> </div> </div> </div> </> ); } export default Skills;

Hi, This is a known issue with Next's app router that has been unresolved for over a year now: https://github.com/vercel/next.js/discussions/42658 This is not at all related to GSAP but yet another shortcoming of the app router which has created a lot of confusion among developers in many ways. Right now the only way to animate the views is to use the pages router: https://stackblitz.com/edit/nextjs-13cw4u Another way is to create an overlay animation as shown in this article, but that won't animate the current view out and the next one in, the app router just keeps working in the same way: https://medium.com/@josiah.webdev/page-transitions-with-gsap-next-js-app-router-5508cee43a80 Hopefully this helps. Happy Tweening!

This is a really odd situation and I can't seem to figure out why— nor do I know how to even ask it properly, but here goes: I'm a Club Greensock Member (yay!) and am using SplitText in this Nextjs project. I use SplitText to animate the text into view via scrolltrigger. Works PERFECTLY on localhost. But when I push this into github and get the preview link on Vercel (so my client can review it), the text animations don't work. But here's the kicker: SplitText is doing its job. I inspected the DOM on the preview link, and the text IS being split properly. It's just that they're not animating. ALL other GSAP animations are working though! The only animations that aren't working are on the elements using SplitText on the Vercel preview link. Looking at all of the animations as a whole, the SplitText animations are being initiated using gsap effects. That's the only difference I can see— but that doesn't explain why it works locally but not on my Vercel preview link. I have other animations being used via gsap effects and they're working fine. I have no idea why this one doesn't. Any ideas? Here's my 'revealText' gsap effect. Again, it works locally, but not on the Vercel preview link. gsap.registerEffect({ name: "revealText", effect: (targets, config) => { return gsap.from(targets, { yPercent: 150, skewY: config.skewY, duration: config.duration, ease: config.ease, scrollTrigger: { trigger: targets, start: "top 80%", }, }); }, defaults: { duration: 1.2, ease: "Sine.easeOut", skewY: 0}, extendTimeline: true, });

I have a problem with production vercel environment. When I try in dev gsap.timeline is work. Next I send to vercel, i have error 500, gsap.timeline is not a function. How I fix this ? My vercel: 500 - Internal Server Error | Nuxt (cyprianwaclaw.vercel.app) Github project: cyprianwaclaw/Nuxt-Pinia-ts (github.com)

Hey @GreenSock, thank you for your reply. This is exactly true, which is causing issues with SPA's when you don't want the scroll position considered. Since I can't show an SPA in Codepen or REPL, I've uploaded the project to Vercel so you can hopefully see more clearly the issue I'm having. https://henry-training.vercel.app/ If you scroll down then navigate to "About" you'll see the dot move up, I would like to lock it to only the "X" axis so it doesn't move up.

Jumped the gun on my rant ;( the instructions for vercel are here: https://vercel.com/guides/using-private-dependencies-with-vercel Lovin it again LOL

Hi, Be sure to have something like this in your .npmrc file: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} This repo was deployed less than two weeks ago to vercel without any issues: https://github.com/rhernandog/gsap-bonus-npm-vercel Here is the live page (not a lot, just a proof of concept of a successful deployment and CI/CD pipeline): https://gsap-bonus-npm-vercel.vercel.app/ If you inspect the console you'll find this line there: https://github.com/rhernandog/gsap-bonus-npm-vercel/blob/main/pages/_app.js#L8 Hopefully this helps. Happy Tweening!

hello everyone, I'm looking for a tutorial gradient stroke move along path like vercel.com site. Thank a lot animation_stroke.mp4

The same token works both locally and on ci/cd. I had the same issue on Vercel after following the steps mentioned on the Gsap dashboard and setting the Vercel environment variable. I then saw that the default install command was set as "yarn install" in my Vercel project, while I was using npm install locally. I overrode the default build command to "npm install" in Vercel, and it started deploying successfully.

hi, i installed gsap following the instructions. i have an .npmrc //npm.greensock.com/:_authToken=5cb-----959 registry=https://registry.npmjs.org/ @gsap:registry=https://npm.greensock.com i get this error error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fbusiness/-/business-3.12.4.tgz: Request failed \"403 Forbidden\"". when i delete my yarn.lock or edit it to remove gsap from the yarn.lock then it works. I need to keep my yarn.lock in my repo. any suggestions on how to fix this? This error occurs in vercel and circleci.

When hosted on Vercel, this React Three Fiber canvas animation sometimes works and other times it really doesn't. I've already had to remove a scroll trigger as it was messing a lot with my hover/mouse events, unfortunately. What can I do so that all the objects are equally moved by the animation every time? I've already included a loader component and all my objects are within a <Suspense fallback={null}> tag. Does my useGSAP function need to return anything? import React, { useRef } from "react"; import { useFrame, useThree } from "@react-three/fiber"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; import ToolboxWithObjects from "./ToolboxWithObjects.js"; export default function Experience({ setIsHoveringLeicaM6 }) { {/** Experience is a component inside the Canvas - only place where we can use R3F hooks */} const { camera, gl } = useThree(); const keyboardRef = useRef(); const microphoneRef = useRef(); const leicaM6Ref = useRef(); const threadRef = useRef(); const businessCardRef = useRef(); const businessCardHorizontalRef = useRef(); const fullToolboxRef = useRef(); useGSAP(() => { // useGSAP instead of useLayoutEffect const tl = gsap.timeline({ }); if (businessCardHorizontalRef.current) { // Mid position tl.to(businessCardHorizontalRef.current.position, { x: 0, y: 1, z: 0.075, duration: 1 }, 0); tl.to(businessCardHorizontalRef.current.rotation, { x: -0.135, y: 0, z: 0, duration: 1 }, 0); // Final position + rotation inside the box tl.to(businessCardHorizontalRef.current.position, { x: 0, y: 0, z: 0.075, duration: 2 }, 2); tl.to(businessCardHorizontalRef.current.rotation, { x: -0.135, y: 0, z: 0, duration: 2 }, 2); } if (businessCardRef.current) { // Mid position tl.to(businessCardRef.current.position, { x: 0.005, y: 3.3, z: 0, duration: 2 }, 0); tl.to(businessCardRef.current.rotation, { x: 0, y: 0, z: 0, duration: 2 }, 0); // Final position + rotation inside the box tl.to(businessCardRef.current.position, { x: 0.005, y: 0, z: 0, duration: 2 }, 2); tl.to(businessCardRef.current.rotation, { x: 0, y: 0, z: 0, duration: 2 }, 2); } if (threadRef.current) { // Mid position tl.to(threadRef.current.position, { x: 1.6, y: 4, z: -0.4, duration: 2 }, 0); // Final position + rotation inside the box tl.to(threadRef.current.position, { x: 1.5, y: -0.18, z: -0.4, duration: 2 }, 2); tl.to(threadRef.current.rotation, { x: 0, y: 0.08, z: 1.6, duration: 4 }, 0); } if (leicaM6Ref.current) { // Mid position tl.to(leicaM6Ref.current.rotation, { x: 0, y: 0, z: 0.1, duration: 2 }, 0); // Final position + rotation inside the box tl.to(leicaM6Ref.current.position, { x: 1.015, y: -0.27, z: 0.47, duration: 2 }, 2); tl.to(leicaM6Ref.current.rotation, { x: 0, y: 0, z: 0.1, duration: 2 }, 2); } if (keyboardRef.current) { // Mid position tl.to(keyboardRef.current.position, { x: -0.6, y: 3, z: 0.8, duration: 1 }, 1); // Final position + rotation inside the box tl.to(keyboardRef.current.position, { x: -0.6, y: 0.13, z: 0.62, duration: 2 }, 2); tl.to(keyboardRef.current.rotation, { x: -1.6, y: -0.75, z: -1.6, duration: 2 }, 2); } if (microphoneRef.current) { // mid position tl.to(microphoneRef.current.position, { x: 0.3, y: 2.8, z: -1.7, duration: 2 }, 0); tl.to(microphoneRef.current.rotation, { x: 5, y: 0.02, z: 1.6, duration: 2 }, 0); // Final position + rotation inside the box tl.to(microphoneRef.current.position, { x: 0.3, y: 0.4, z: -1.7, duration: 2 }, 2); tl.to(microphoneRef.current.rotation, { x: 5, y: 0.02, z: 1.6, duration: 2 }, 2); } tl.to(camera.rotation, { x: -0.6, y: 0, z: 0, duration: 3 }, 0); tl.to(camera.position, { x: 0, y: 4, z: 6, duration: 3 }, 0); if (fullToolboxRef.current) { // objects could fall down inside the box tl.to(fullToolboxRef.current.rotation, { x: 0, y: -1.525, z: 0, duration: 1 }, 4); tl.to(camera.rotation, { x: -1.25, y: 0, z: 0, duration: 1 }, 4); tl.to(camera.position, { x: 0, y: 6, z: 2.1, duration: 1 }, 4); } }, []); return <> <group position-y={-0.6}> <ToolboxWithObjects keyboardRef={keyboardRef} microphoneRef={microphoneRef} leicaM6Ref={leicaM6Ref} threadRef={threadRef} businessCardRef={businessCardRef} businessCardHorizontalRef={businessCardHorizontalRef} fullToolboxRef={fullToolboxRef} setIsHoveringLeicaM6={setIsHoveringLeicaM6} /> </group> </> } b237fe96-c2b8-44d3-ad06-5e3d2e51dee4.mp4

I am trying to deploy my SvelteKit Website on Vercel, but it seems there is an issue with GSAP Business or (maybe) just ScrollTrigger. My code works on localhost and I configured Vercel environnement key NPM_RC with the value from my account license. Even so, I get an error saying it can't find ScrollTrigger's module. I also tried the Dist folder instead, but it didn't work either. How can I solve this?

Hi @dianthe studio and welcome to the GSAP Forums! Thanks for being a Club GSAP member and supporting GSAP! Be aware that when you first install GSAP locally in your project your .npmrc file should have your token. Just be sure to not push that file to a public repo just yet. The environmental variable is after the installation in your local machine is successful and before pushing the changes to your repo. The flow should be like this: Create your Next project locally Create your .npmrc file, that should look like this (at this point don't push any files to a public repo yet): always-auth=true //npm.greensock.com/:_authToken=your-token-here @gsap:registry=https://npm.greensock.com Install GSAP: npm install gsap@npm:@gsap/shockingly Install the @gsap/react package so you can use our brand new useGSAP hook: npm install -s @gsap/react Change your .npmrc file to this: always-auth=true //npm.greensock.com/:_authToken=${GSAP_TOKEN} @gsap:registry=https://npm.greensock.com At this point is safe to push files and changes to a public repo since the token is no longer in the .npmrc file. Go to your deployment provider (Netlify/Vercel/etc.) and create an environmental variable in your project called GSAP_TOKEN and add your token in it. Now you should be able to deploy and install everything without any issues. Let us know how this works. Happy Tweening!

Hi, Just want to share how I managed to deploy GSAP Shockingly to Vercel using yarn. Steps below: 1. Create a .npmrc file on your project directory that contains the following: //registry.npmjs.org/ @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken={YOUR_GENERATED_TOKEN_HERE} 2. Update your package.json file and add the GSAP dependency below then run yarn install "@gsap/shockingly": "npm@gsap/shockingly" The package has to be installed with the @gsap prefix to match the @gsap custom registry path defined in .npmrc (or the ENV_VARIABLE in Vercel) You can also install it similar to the yarn command below. Technically, it should work the same way but I haven't tested it yet. yarn add @gsap/shockingly gsap@npm:gsap/shockingly 3. Once installed, you can import GSAP via ES Modules or UMD/CommonJS. In my case, I had to import using UMD/CommonJS as I was having issues with ES Modules using Next.js. ES Modules import { gsap } from "@gsap/shockingly/gsap"; import { ScrollTrigger } from "@gsap/shockingly/ScrollTrigger"; UMD/CommonJS import { gsap } from "@gsap/shockingly/dist/gsap"; import { ScrollTrigger } from "@gsap/shockingly/dist/ScrollTrigger"; Note: If your project is using Typescript, you might encounter issues about missing types. To resolve this, add this line to your project's tsconfig.json. "files": ["node_modules/@gsap/shockingly/types/index.d.ts"] 4. In Vercel, go to your Project then Settings -> Environment Variables and create an environment variable for .npmrc. Example below: Name: NPM_RC Value: //registry.npmjs.org/ @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken={YOUR_GENERATED_TOKEN_HERE} 5. Do a test deployment and if everything is set up correctly, Vercel should install GSAP and build the site without any issues. This solution is specific to issues deploying to Vercel when using yarn. Also, if you have a Business license, just change all shockingly references to business. Happy to assist anyone who's having the same issue, and if this solution works for you, please let me know - Chris Project Stack: Next.js (Typescript) - v12.3.4 Yarn - v1.22.19 Node - v18.13.0 (I can confirm that it also works on v16 and above) GSAP License - Shockingly Vercel

FWIW - I followed the GSAP installation instructions for my Nuxt3 App, using pnpm, Im using a private repo and have no issues with deployment via Vercel. My package.json file: "dependencies": { "gsap": "npm:@gsap/shockingly@^3.12.4", } My pnpm-lock.yaml file: gsap: specifier: npm:@gsap/shockingly@^3.12.4 version: /@gsap/shockingly@3.12.4

Hi @artvera, Sorry about the issues. After a few trial and error deployments I managed to successfully deploy a NextJS app into Vercel using the Shockingly package (you are a business member, but the files in both packages are the same). Here is how the .npmrc file looks like: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} Here is the repo just in case: https://github.com/rhernandog/gsap-bonus-npm-vercel And here is the live site, the console is logging the MorphSVG plugin Object: https://gsap-bonus-npm-vercel.vercel.app/ Hopefully this helps. Happy Tweening!

Hi @Rodrigo, I'm facing the same challenge as OP regarding the public repository, next.js and Vercel. Like you have instructed I added an environment variable to Vercel: https://imgur.com/GlNLZsK . In my public repository I did add the .npmrc file, so that Vercel would know where to use the variable. See here: https://github.com/olavgit/crftd/blob/main/.npmrc . In my IDE it works just fine, using the .env.development.local like you instructed, but when I push my repo and Vercel tries to build, I keep getting the following error: https://imgur.com/xvKFIvG . Any idea of what is going wrong? Already checked the input of the environment variable, and it doesn't have any characters like a space that shouldn't be there.. Looking forward to your reply! Olav

These may be helpful: https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel

Hi GSAP I'm facing a new issue to make the scrolltrigger working properly in next js 13.4 when switch between pages, I have done 2 pages with gsap and scrolltrigger in next js (home page, about page), there is no issues if i just visit one of the page, if i go to home page first then about page, and then scroll further down in about page, and then redirect back the home page again, the problem happended, it looks like the scrolltrigger positions were all incorrect, it seems like not been cleaned properly. I have been search online for the solution, and try to use gsap context to wrap all the animation and scrolltriggers, then return to clean with context revert function as recommended from the offical website, i also put ScrollTrigger.refresh() to reset its positions or animations, after i use ScrollTrigger.refresh(), everything works perfectly in dev mode, no problems when i'm swtich between the pages, it aways reset the scrolltrigger to act correctly, but ScrollTrigger.refresh() not working when i deploy with production mode, i tried everything and could not work it out, it is a bit hard for me to put the code into Codepen as it's a project with routes and dependencies and paths...., so i just attach a image of my gsap code for you as an reference, also a link of the website deployed on vercel Create Next App (next-cv-psi.vercel.app)

Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js.

I have a problem when using scrolltrigger with nextjs 14 on my local machine when running npm run dev. On the production site it works, but I can't develop like this. I have a very basic example. Just when you create a next app with npx create-next-app@latestand this as page.tsx: 'use client'; import Image from 'next/image'; import { useLayoutEffect, useRef } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; export default function Home() { const backgroundImage = useRef(null); const foregroundImage = useRef(null); useLayoutEffect(() => { // get the height of the backgroundImage dom element console.log(backgroundImage.current.clientHeight); console.log(foregroundImage.current.clientHeight); gsap.registerPlugin(ScrollTrigger); const timeline = gsap.timeline({ scrollTrigger: { trigger: document.documentElement, start: 'top', end: '+=500px', scrub: true, }, }); timeline .from(backgroundImage.current, {clipPath: "inset(15%)"}); }, []); return ( <main> <div> <div ref={backgroundImage}> <img src="/images/image.jpg" alt="xx" /> </div> </div> <div ref={foregroundImage} className="h-[2000px]"> hello </div> </main> ); } on production (Vercel) this results in: https://www.dropbox.com/scl/fi/1n1j9yqoz4uh2iln10uod/production.mov?rlkey=kkpe84c6259d6k4trqml3dq4q&dl=0 But on local dev: https://www.dropbox.com/scl/fi/gljyff9ub7bmf6j96iym2/dev.mov?rlkey=8s9ec8ga1zz7mycogv2awrg9c&dl=0