Search the Community

import React, { useEffect } from "react"; import { Link } from "react-router-dom"; import { ReactLenis } from "lenis/react"; import Transition from "../../components/transition/Transition"; import { useLanguage } from "../../LanguageContext"; import gsap from "gsap"; import { SplitText } from "gsap/SplitText"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const Vibeup = () => { const { language } = useLanguage(); useEffect(() => { console.log("useEffect triggered"); const observer = new MutationObserver((mutationsList, observer) => { for (let mutation of mutationsList) { if (mutation.type === 'childList') { const splitTextElement = document.querySelector(".split"); console.log("Checking for .split element:", splitTextElement); if (splitTextElement) { observer.disconnect(); let mySplitText = new SplitText(".split", { type: "chars" }); let chars = mySplitText.chars; console.log("SplitText initialized", chars); gsap.from(chars, { yPercent: 130, stagger: 0.02, ease: "back.out", duration: 1, scrollTrigger: { trigger: '.split', start: "top 70%", } }); } } } }); observer.observe(document.body, { childList: true, subtree: true }); return () => observer.disconnect(); }, []); Hello, I deployed my site to Vercel and added the token values to the environment variables. It works fine locally, but when I deployed it, the page just shows up blank—CSS works, but no content. Did I miss something? { "name": "linh-nguyen", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "framer-motion": "^11.3.30", "gsap": "npm:@gsap/shockingly@^3.12.7", "i18next": "^24.2.1", "lenis": "^1.1.13", "lucide-react": "^0.474.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-i18next": "^15.4.0", "react-router-dom": "^6.26.1" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", "eslint": "^9.9.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "postcss": "^8.5.1", "tailwindcss": "^4.0.0", "vite": "^5.4.1" } }

Good afternoon. I am at a loss regarding the Club Plugins and deploying to Vercel. I have done the following things (after reading documentation): Set up a .npmrc file with the following content: always-auth=true //npm.greensock.com/:_authToken=${GSAP_TOKEN} @gsap:registry=https://npm.greensock.com Added the ${GSAP_TOKEN} to both my .env.local and in Vercel in the environment variables. Installed the gsap Business package like so: npm install gsap@npm:@gsap/business I have checked the package.json and it is present as: "gsap": "npm:@gsap/business@^3.12.5", I have created some animations and I import/register them like so: import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import DrawSVGPlugin from "gsap/DrawSVGPlugin"; And so: if (typeof window !== "undefined") { gsap.registerPlugin(DrawSVGPlugin, useGSAP); } Developing in localhost provides no errors. Building on Vercel shows me the error: When I try to do install the business packages again, it says: npm error code E403 npm error 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fbusiness - bad authorization header. Please login again npm error 403 In most cases, you or one of your dependencies are requesting npm error 403 a package version that is forbidden by your security policy, or npm error 403 on a server you do not have access to. So, I am at a loss.. Maybe some fresh eyes can see my simple mistake? Thanks in advance! Cheers, Jorik

Hey, I'm getting an error that i should be logged in. I have an npmrc that looks like this: legacy-peer-deps=true always-auth=true //npm.greensock.com/:_authToken=xxxx-xxxxx-xxxxx-xxxxx-xxxxxxxxxx @gsap:registry=https://npm.greensock.com I included a screenshot of the error I'm getting on deployment. I overrided the install with the npm install --legacy-peer-deps` on the vercel side of things too. I saw the steps here: "https://gsap.com/community/forums/topic/35453-cant-deploy-to-vercel-403-forbidden-error/#comment-177298" I dont understand the 3rd step.. I've been adding my env varibles directly through the Vercel website project settings. I don't have a production / development variations.

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:

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

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 !

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

Hello, I am unable to deploy my Nextjs app with Vercel. I keep getting the error that I attached in the email. I tried following the instructions provided by Greensock, but to no avail. Has anyone encountered this problem before? Thank you in advance.