Jump to content
Search Community

Chriis last won the day on November 23 2023

Chriis had the most liked content!

Chriis

Members
  • Posts

    12
  • Joined

  • Last visited

  • Days Won

    1

Chriis last won the day on November 23 2023

Chriis had the most liked content!

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Chriis's Achievements

  1. Thanks, @Windpixel! My use case requires names to appear all at once that bleed to the top and bottom part of the screen
  2. Hello. I'm trying to re-use this infinite vertical repeat example and thinking if it's possible to make it look like a rolling credits that autoplays and loops infinitely on page load instead of scrolling it? Looking forward to everyone's idea. Thanks! https://codepen.io/GreenSock/pen/qBYbqNj
  3. @akrdesign I'm happy to help if you could describe the issues you're having and what you're trying to achieve.
  4. @akrdesign You forgot to register the Draggable plugin to GSAP. You can do so by adding this below your Draggable import: gsap.registerPlugin(Draggable)
  5. Hello. I saw that there is now an official GSAP React package. I know you guys haven't announced it yet and it might not be ready, but as a React/Next.js user, this is huge! I'm wondering what's the best way to contribute to this package whether it be docs, improvements, etc. I'm really keen to help, if possible
  6. @akrdesign Perfect! Thanks a lot ?
  7. 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
  8. @Esben Juul Mortensen You can try this solution
  9. @jguillen Are you able to provide a snippet on how you imported GSAP in your code?
  10. 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.
  11. 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
×
×
  • Create New...