Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Chriis

  1. @akrdesign Perfect! Thanks a lot 🙂
  2. Hello, I'm wondering if someone here has tried to do this image reveal animation or something similar? The idea is to have a pixel art kind of reveal that animates out to reveal the image. Pixel animation doesn't have to be dependent on the image behind Looking to have at least 7 to 8 frames before it animates out Any tips or ideas would be highly appreciated. Thanks in advance! Test_Reveal_Animation.mp4
  3. @Esben Juul Mortensen You can try this solution
  4. @jguillen Are you able to provide a snippet on how you imported GSAP in your code?
  5. I managed to deploy GSAP Shockingly to Vercel using yarn and have posted a solution on the link below. Might be worth checking for users who don't want to switch their projects over to npm.
  6. 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