Search the Community

Hey, I was trying to build my project on vercel but I kept getting this error even though my gsap premium plan is valid: npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.12.5.tgz failed, reason: certificate has expired npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-04-03T13_36_27_218Z-debug-0.log Error: Command "npm install" exited with 1 Could it be caused by the SSL certificate of npm.greensock.com?

Hi @stectix, Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption. I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo: https://github.com/rhernandog/next-gsap-bonus-yarn-vercel Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin): https://next-gsap-bonus-yarn-vercel.vercel.app/ I installed using the shockingly package since the plugins are the same: yarn add gsap@npm:@gsap/shockingly Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well. Hopefully this helps. Happy Tweening!

Dear admin/devs at Greensock. You need to make a solid fix for this Yarn issue asap! I don't wish to be too abrasive with my comment but this issue is seriously annoying. Nothing in this topic or your installation page works. Im on a pretty standard setup (macos, homebrew) and this should not be happening. I went ahead and used the zip file solution because Im sick of trying this for years with no success. Installation should be fluid and easy, allowing us devs to get to work as quickly as possible. There needs to be a fool proof guide that works for local env and popular deploy services like Vercel. Please.

Hi, I have a Problem with my project on Vercel and GSAP Bonus Plugins. I don't know if i can paste the code in CodePen since it's Typescript and Next.js so i added some screenshots of the code. Locally everything works fine, but on Vercel i get this Building Log Errors: I have generated a PRIVJS_TOKEN and installed all Bonus Plugins via npm locally. In the console of the browser i get this errors:

Hello, I have a few questions regarding an issue I'm encountering. The problem is that the module 'gsap/ScrambleTextPlugin' cannot be found. This issue occurs when I use the command 'vercel --prod', but there are no problems when using 'npm run dev'. I've attempted the solution provided in this article (https://www.privjs.com/blog/how-to-install-club-greensock-packages-on-vercel), but it was unsuccessful. It's important to note that I'm using the premium version of the package

Hey - I've made a demo repo for you Here's the repo incase there's anything useful there? https://github.com/cassieevans/vercel-clubGSAP/blob/main/.npmrc Here's the site - https://vercel-club-gsap.vercel.app/ Here's what my env var looks like on vercel. This is what my npmrc looks like always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${PRIVJS_TOKEN} I just followed the instruction in the vercel guide in our docs so I'm afraid I'm at a loss of how to help here. You may just have to play spot the difference between this repo and yours? Sorry I can't help any more than this. At least we know it is possible and there's not a big glaring issue anywhere.

Hey all - I've been struggling to deploy a test project via Vercel, I can get the app to build but only when using the command: 'npm install gsap' If I use 'npm install gsap@npm:@gsap/business' or any other such as 'npm install gsap@npm:@gsap/shockingly' or 'npm install gsap@npm:@gsap/premium' then I get 403 errors: [17:29:08.248] Running build in Washington, D.C., USA (East) – iad1 [17:29:09.522] Cloning github.com/cyberpatrolunit/videoglove_landing (Branch: main, Commit: 4f8dc0d) [17:29:09.536] Skipping build cache, deployment was triggered without cache. [17:29:10.074] Cloning completed: 551.358ms [17:29:10.396] Running "vercel build" [17:29:10.902] Vercel CLI 32.6.1 [17:29:11.777] Running "install" command: `npm install gsap@npm:@gsap/premium`... [17:29:24.884] npm WARN ERESOLVE overriding peer dependency [17:29:38.358] npm ERR! code E403 [17:29:38.362] npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fpremium - bad authorization header. Please login again [17:29:38.362] npm ERR! 403 In most cases, you or one of your dependencies are requesting [17:29:38.363] npm ERR! 403 a package version that is forbidden by your security policy, or [17:29:38.363] npm ERR! 403 on a server you do not have access to. [17:29:38.365] [17:29:38.366] npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2023-12-11T01_29_12_236Z-debug-0.log [17:29:38.414] Error: Command "npm install gsap@npm:@gsap/premium" exited with 1 I have a '.npmrc' in my root dir with : always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken={my_token} Send I've poked around finding similar issues but I still can't get authenticated.. Any insight would be greatly appreciated !

I am getting this error for my nextjs project, tried all the possible option still not working npm install gsap@npm:@gsap/shockingly npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly - you don't have access to this package: @gsap/shockingly npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Jossy\Desktop\New\tmpnodejsnpm-cache\_logs\2023-12-25T02_43_35_550Z-debug-0.log

Unfortunately, I have a very strange behavior after installing @gsap/react via yarn. I have installed GSAP in a premium version and deployed it to Vercel. Everything works and the license key is recognized. Exactly the same deployment, only adding @gsap/react, throws an error on Vercel: Request failed "403 Forbidden". ?

Hi, I've been fiddling a bit with your demo and besides the captions issue I can't reproduce other problems in your demo. I think the issue stems from the delay you have in your instance for showing the captions: gsap.to(imageElementsArray('.caption'), { delay: 2, // <- HERE duration: 0.5, opacity: 1, stagger: 0.15, ease: 'circ.inOut', onComplete: () => { // The srcSet on each image is controlled by tracking isGridView state setIsGridView(true) } }) I think a safer approach is to use the onComplete callback from the Flip instance. As soon as I remove that delay, the captions are no longer visible. Is worth mentioning that using the onComplete callback from the Flip instance also can cause this behaviour since when you toggle before the Flip instance is completed the onComplete callback will still be triggered. You could kill that Flip instance to prevent that callback from being called or use a simple boolean to prevent the captions tween from being created at all: const performLayoutFlip = contextSafe((container, scrollToId, captions) => { const selector = gsap.utils.selector(container); const state = Flip.getState( selector('.grid-container img, .flex-container img') ); container.classList.toggle('grid-container'); container.classList.toggle('flex-container'); Flip.from(state, { duration: 2, ease: 'power4.out', scale: false, fade: true, onComplete: () => { if (captions && showCaptions.current) { gsap.to('.caption', { duration: 0.5, opacity: 1, stagger: 0.15, ease: 'circ.inOut', onComplete: () => { setIsGridView(true); }, }); } if (document && scrollToId) { document .getElementById(scrollToId) .scrollIntoView({ behavior: 'smooth', block: 'center' }); } }, }); }); const clickHandler = contextSafe((event) => { const container = imagesRef?.current; const imageElementsArray = gsap.utils.selector(container); const switchingToGridView = container.classList.contains('flex-container'); if (event.target.tagName === 'IMG') { if (switchingToGridView) { performLayoutFlip(container, null, true); showCaptions.current = true; } else { showCaptions.current = false; gsap.killTweensOf('.caption'); // Fade out all captions before Flip gsap.to('.caption', { duration: 0.5, opacity: 0, ease: 'circ.inOut', onComplete: () => { performLayoutFlip(container, event.target.id); setIsGridView(false); }, }); } } }); Also all of this is not needed at all: const container = imagesRef?.current; const imageElementsArray = gsap.utils.selector(container); // Then gsap.to(imageElementsArray('.caption'), {/**/}); You already set your scope in the useGSAP hook to imagesRef so running this anywhere inside the useGSAP scope or any contextSafe call: gsap.utils.toArray(".caption"); Will return an array of the elements with the caption class that are in the scope of imagesRef.current, so that is quite redundant and wasteful. In fact since that is called inside the contextSafe scope you can just do this: gsap.to('.caption'), {/**/}); Since that particular GSAP instance will use the scope defined in the useGSAP hook to do the same. Here is a fork of your demo: https://stackblitz.com/edit/vercel-next-js-1kpj9n?file=pages%2Findex.jsx Hopefully this helps. Happy Tweening!

Hi @anzorAs, if I'm correct you can also share a link the Vercel environment where we can see and modify the code right? You're sharing a link to just the preview doesn't allow us to modify the code or even see the code, so this way we can't help you debug. If you can't share a link to a code editor in Vercel can you maybe recreate the demo in something like Codepen or Stackblitz? Here are our templates https://stackblitz.com/@GreenSockLearning/collections What you can try your self is setting will-change: transform; to the elements that will have there transforms change (in your CSS), this might already help. And just to be sure there are no transition: all .3s ease-in; in your CSS, right?

Hi @Nightshift and welcome to the GSAP Forums! Thanks for being a Club GSAP member and supporting GSAP! I just created a new React project using Yarn and deployed it to Vercel without any issues: https://github.com/rhernandog/yarn-bonus-test-vercel Here is the live URL: https://yarn-bonus-test-vercel.vercel.app/ If you check the console you'll see the version of ScrollSmoother that is being loaded and registered correctly using the gsap.registerPlugin() method. I made some changes and deployed again and I don't have to delete the yarn.lock file in order to get it working. Honestly I don't have a lot of experience with Yarn but I don't recall any issues like this. Did you created an environmental variable in your Vercel project's settings: Is your token working locally without any issues? You can try creating a new folder (name doesn't matter) and then creating a new npm project in it using: npm init -y Then create the .npmrc file with your token and install GSAP with the bonus plugins and see if it works. Happy Tweening!

Hi, In Next you have to import the UMD modules for the plugins: import gsap from "gsap"; import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin"; import { useGSAP } from "@gsap/react"; if (typeof window !== "undefined") { gsap.registerPlugin(DrawSVGPlugin, useGSAP); } Finally in Vercel be sure to add an environmental variable for your token as shown in our installation docs: https://gsap.com/docs/v3/Installation/guides/Club GSAP & Vercel Finally be sure to not push your token to a public repo in the .npmrc file. Hopefully this helps. Happy Tweening!

i have problem in scroll trigger project page with outlet react-router-dom when first reload pinned not working in the other outlet . https://portfolio2024-two-black.vercel.app/project/live

Hi guys ! My time to apologize for the delay, didn't get notified for your answers. @Rodrigo I'm already using your approach for my SvelteKit apps and it works well. But I don't have any types. Maybe you'll have a solution for me like adding the types in my tsconfig which doesn't work for me either ? I got this in my tsconfig.json: { "extends": "./.svelte-kit/tsconfig.json", "compilerOptions": { "allowJs": true, "checkJs": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "skipLibCheck": true, "sourceMap": true }, "files": ["node_modules/gsap/types/index.d.ts"] The only way for me to get the types is to import from the package directly. But this breaks my app in production. Unable to build on vercel/netlify, errors when building locally. So either I have the types but can't use gsap as it's broken, or I get gsap without the types, and have to create a declaration.d.ts file to declare all the modules. I can grant access to any github repo if you need to investigate this, or any other solution if needed, let me know ✌️

I got this error when trying to deploy on Vercel. Im using the last version of GSAP and @gsap/react: npm ERR! code E403 22:17:59.965 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2freact/-/react-2.1.0.tgz - You must be logged in to install/publish packages. 22:17:59.965 npm ERR! 403 In most cases, you or one of your dependencies are requesting 22:17:59.965 npm ERR! 403 a package version that is forbidden by your security policy, or 22:17:59.966 npm ERR! 403 on a server you do not have access to. 22:17:59.967 22:17:59.967 npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2024-02-13T01_17_48_879Z-debug-0.log 22:17:59.990 Error: Command "npm install" exited with 1 How can I fix it?

Hello! I am having a weird issue with my Animations when in a particular instance. My page consists of: SVG-Letters that get animated in on page load 4 absolutely positioned blurred circles in the background that have a css animation on them. For the sake of testing I've reduced the CSS animation so that it basically doesn't do anything (translate(0px, 0px) scale(1)) When I take the animation off the circles, the letter animation on mobile is really laggy, when I put the animation back it works well again. For this I have prepared a demo: https://layered-2023-git-mobile-tag-anzorasadovs-projects.vercel.app/en When navigating to the site with mobile you will notice the svg animation being laggy. Clicking on the "toggle animation blob" button with enable the animation on the circles (which, again, doesn't really do anything) Clicking on "rerun" will rerun the svg animation, which will run smoothly. I am really curious about what the issue might be and I hope you guys can help me figure it out. Thanks!

with threejs you are making it 10x harder for yourself since you will also need a physics engine with threejs like Rapier or cannon, creating it with a framework like react for example. you will need to study also extra stuff like react three fiber, react three drei, react three rapier / cannon i think Rodrigo gave you the best option here to use a physics engine directly something like this one i created with Matter it was much simpler to do it compared to trying to add physics with threejs https://balls-orcin.vercel.app/ you can grab them and test the zero gravity btn

Hi, Not sure if this is the right forum to ask this question but hoping that one of the many geniuses on here is able to provide assistance so here it goes. I am having an issue when trying to deploy my Next.js project to Vercel and it seems to be occurring in the build process and more specifically to due with gsap.context() This is my code inside my index.tsx page: import { useRef } from 'react'; import dynamic from "next/dynamic" import { montserrat } from '../utils/fonts' import { gsap } from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import useIsomorphicLayoutEffect from '../utils/isomorphicEffect'; import Head from 'next/head' import Image from 'next/image' import styles from '@/styles/home.module.scss' import profilePic from '@/images/dayne-profile-circle-new.png' import gradientPic from '@/images/gradient-bg.jpg' gsap.registerPlugin(ScrollTrigger, ScrollSmoother); export default function Home() { const smoother = useRef(); const ctx = useRef(); useIsomorphicLayoutEffect(() => { ctx.current = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 2, effects: true, }); ScrollTrigger.create({ trigger: '#pinned-element', pin: true, start: 'top top', end: '+=5000', pinSpacing: false }); }); return () => ctx.current.revert(); }); return ( <> <Head> <title>Online portfolio of web developer, Dayne Coulson-Hoffacker</title> <meta name="description" content="Online portfolio of web developer Dayne Coulson-Hoffacker" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" type="image/png" sizes="any" /> </Head> <div id="smooth-wrapper" className={styles.scrollWrapper}> <div id='smooth-content'> </div> </div> </> ) } This code works perfectly on my local server (https://localhost:3000) The issue is when I push changes to my repo and Vercel runs a build from those changes. I have attached the error message that I am being given from Vercel to this post. Please, any React geniuses who can shed some light it would be greatly appreciated. Thanks, Dayne

this animation is starting with a delay on the first time only you can check it on this website: fotf-frontend.vercel.app. when a green box appears then there is a lag before the animation starts const tl1 = gsap.timeline({ paused: true }) tl1.to(".box", { rotate: "45deg", transformOrigin: "center center", transform: "scale(40)", duration: .5, }) .to(".box2-content , .box-2, .shuffle-top", { y: 0, duration: .5, opacity: 1 }, 0) .to(".layers", { y: 0, duration: .5, }, 0) ScrollTrigger.create({ trigger: ".box", start: "center center", end: "center 49%", scrub: 1, onEnter: () => { tl1.play() }, onLeaveBack: () => { tl1.reverse() } })

I am attempting to deploy to Vercel with Club Greensock packages, and I am receiving the following error: [13:52:29.305] Running build in Cleveland, USA (East) – cle1 [13:52:29.368] Cloning github.com/dwaynedraper/bed-and-barkfest (Branch: master, Commit: f46ce8d) [13:52:31.871] Cloning completed: 2.503s [13:52:33.115] Restored build cache [13:52:33.146] Running "vercel build" [13:52:33.652] Vercel CLI 29.3.6 [13:52:33.906] Installing dependencies... [13:52:35.952] npm ERR! code E403 [13:52:35.954] npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.11.5.tgz - bad authorization header. Please login again [13:52:35.954] npm ERR! 403 In most cases, you or one of your dependencies are requesting [13:52:35.954] npm ERR! 403 a package version that is forbidden by your security policy, or [13:52:35.954] npm ERR! 403 on a server you do not have access to. [13:52:35.954] [13:52:35.954] npm ERR! A complete log of this run can be found in: [13:52:35.955] npm ERR! /vercel/.npm/_logs/2023-05-29T18_52_34_276Z-debug-0.log [13:52:35.972] Error: Command "npm install" exited with 1 [13:52:36.114] BUILD_UTILS_SPAWN_1: Command "npm install" exited with 1 I have added my NPM_TOKEN to vercel. What else do I need to do?

Hi, Is your project working as expected locally? Are you getting the same(or another) error? Here is a repo using Next and the bonus plugins that is working as expected: https://github.com/rhernandog/gsap-bonus-npm-vercel In your projects settings create an environmental variable that matches the configuration of your .npmrc file: Your .npmrc file should look like this in your repo: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} Is super important to add the dollar sign and the curly braces around the variable. If you check the deployment URL and open the console you'll see an object that contains a reference to the MorphSVG Plugin: https://gsap-bonus-npm-vercel.vercel.app/ Hopefully this helps. Happy Tweening!

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

I'm trying to deploy my app to vercel. I tried with these two tutorials: https://vercel.com/guides/using-private-dependencies-with-vercel https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel I keep getting error like below: error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.11.4.tgz: Request failed \"403 Forbidden\"". To summarize what I did: 1. Installed gsap shockingly package with command below: npm install gsap@npm:@gsap/shockingly 2. Created ".npmrc" file in the root dir of my project with content like below: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=MY-TOKEN-HERE 3. Set up environment variables in the Vercel project using commands below: vercel env add NPM_RC production < ~/.npmrc vercel env add NPM_RC preview < ~/.npmrc vercel env add NPM_RC development < ~/.npmrc 4. Verified in Vercel that ENVs are indeed created with correct values 5. Initialized deploy. To be clear installing locally works as intended. Please help