Jump to content
Search Community

Search the Community

Showing results for 'vercel' in content posted in GSAP.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 209 results

  1. 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;
  2. 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
  3. 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 ✌️
  4. 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!
  5. 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
  6. 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() } })
  7. 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, });
  8. 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.
  9. 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
  10. 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!
  11. 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)
  12. 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!
  13. 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.
  14. 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
  15. 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!
  16. 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.
  17. 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?
  18. hello everyone, I'm looking for a tutorial gradient stroke move along path like vercel.com site. Thank a lot animation_stroke.mp4
  19. 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
  20. 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.
  21. 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
  22. 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!
  23. 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
  24. 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!
  25. 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)
×
×
  • Create New...