TimTh

Thanks Jack, that was super helpful. I had tried typing it as a MouseEventHandler in a different way and it didn't work, but the syntax you provided did. Really appreciate it!

I am stumped trying to correctly type my animation functions when wrapped in contextSafe. You can see an example of my problem here on StackBlitz. In it I’m trying to reproduce a simple version of Animating on interactions with callbacks as shown in the first method of using contextSafe in the Animating on interaction section of the Using GSAP with React page in the docs. I’ve got two simple rotation animations, a square and a circle. The circle is wrapped in contextSafe and the square is not. Both animations work correctly, but the circle throws the TS error “Type 'Function' is not assignable to type 'MouseEventHandler<HTMLDivElement>'.” on the onClick of the circle div. I’ve tried a bunch of different ways of typing the contextSafe function but none seem to work. Does anyone have any insights into what I’m missing, or any examples of TypeScript implementations of contextSafe and useGSAP? Thanks for any help!

Hi Rodrigo - I got it working with your steps, thank you very much! Turns out I had a type in my npmrc file when I first tried installing the react package my auth token. My bad, sorry to take your time with this. However, it was helpful to know that the @gsap/react does require the club token - I wasn't 100% clear on that. Maybe I missed it in the docs. I wonder if it would be helpful to highlight. Regardless, thanks again, really appreciate the super support as always.

Thanks Rodrigo. I did try installing @gsap/react with the actual auth token in my npmrc file before posting, but I will try again and dig into your repo to see if I missed anything else and let you know. I appreciate your help, as always.

Hello - I’m trying to install @gsap/react in a project deployed on netlify, but it’s failing in a couple different ways. First, if I build a project without club plugins, i.e. npm install gsap, I can successfully install @gsap/react locally but then it fails in the netlify build: npm ERR! 403 403 Forbidden - GET **https://npm.greensock.com/@gsap%2Freact/-/react-2.0.2.tgz** - You must be logged in to install/publish packages. 8:37:10 PM: npm ERR! 403 In most cases, you or one of your dependencies are requesting 8:37:10 PM: npm ERR! 403 a package version that is forbidden by your security policy, or 8:37:10 PM: npm ERR! 403 on a server you do not have access to. 8:37:10 PM: npm ERR! A complete log of this run can be found in: /opt/buildhome/.npm/_logs/2023-12-20T04_37_09_097Z-debug-0.log Second, if I build a project with club plugins, i.e. npm install gsap/shockingly, then @gsap/react fails the local install with a similar error: $ npm install @gsap/react npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2Freact - bad authorization header. Please login again 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. Anyone have any suggestions? Thank you!

To close out this thread for future reference, it turns out that my anti-malware software, Malwarebytes, was preventing the install from reaching the auth server. Turning it off temporarily allowed for successful installation. Also, installing from the zip files worked as well, as long as I made sure my github repo was private so as not to expose the club files. I'd like to give a huge shoutout to Rodrigo for amazing support. He was super proactive in helping me through the troubleshooting process over a period of several days. It was clear he really cared that I found a solution. I feel like GSAP's community support is way better than a lot of the paid support one gets with other types of software. Love it. I'd also like to thank Prasanna for going above and beyond to help me make sure it wasn't just some simple mistake I was making. Thank you both!

Hi Rodrigo - Here's the log from the test. Thanks again. 2023-10-27T16_08_11_793Z-debug-0.log

Hi Prasanna & Rodrigo Prasanna, thanks for jumping in. I am running node 18.18.2, which I believe is the latest. Good suggestion though - it was one of the first things I checked before my original post. I also tried your config commands and it still failed with the same error, but did raise a question. The auth token I am using is really long compared to the placeholder in your code. It's xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx not xxxxx-xxxx-xxxx. I'm guessing you were just using shorthand and that's not the issue, but had to check as a long shot. I am cutting and pasting right from the GSAP page. Rodrigo, I also tried your init -y suggestion, with no luck. Thanks for throwing up ideas, for sure! At this point, I'm wondering if it is account-specific issue? I've tried the install on a couple different machines, so it may not be machine specific. Should I get a different gsap account and try with that? Or I could send you a zoom invitation and share screens to make sure I'm not doing something boneheaded... I sincerely appreciate both of you!

Hi Rodrigo - Thanks for sticking with me. I checked my global npmrc file with npm config -g edit and didn't see any gsap auth token. Wouldn't a project-level npmrc file override it anyway? I'll try the npm init -y option tomorrow and let you know.

Still getting the same error. I repeated the steps above for a fresh install but deleted pacakge-lock.json between steps 3 & 4.

Hi Rodrigo - Unfortunately these steps still give me the same error. Here's what I did: 1) npx create-next-app@latest my-app --typescript --tailwind --eslint 2) created .npmrc file in the root of the new project 3) generated a fresh auth token and pasted it into .npmrc according to the first code example you provided above 4) npm install gsap@npm:@gsap/shockingly ---> Fails with the error message above Any further suggestions? Thanks for your continued help, I'd love to use the club stuff for my project!

Thanks Rodrigo, I will give this a try and let you know how it goes. Much appreciated.

Thank you for looking into this, Rodrigo. Unfortunately, I can't get it to install in my local environment as a first step, so I haven't even tried to deploy to Netlify yet. I do understand I need to add an environment variable when I do, though.

Hi All - I’m trying to install GSAP into my react/nextjs project and getting the following "wrong version number" error: $ npm install gsap@npm:@gsap/shockingly npm ERR! code EPROTO npm ERR! syscall write npm ERR! errno EPROTO npm ERR! request to https://npm.greensock.com/@gsap%2fshockingly failed, reason: write EPROTO C8A30000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:355: npm ERR! I’m following the instructions for Club GSAP & Netlify, since I eventually want to deploy there, but can’t even get the install to go in my local environment. I created the .npmrc file at the root of my project using a freshly generated token: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${myAuthToken} And I’ve tried to install with both /business and /shockingly and get the same error for both. Anyone have any suggestions? Thanks very much!

Thank you, Jack. This is very helpful. It was the square bracket notation that I was missing. Your solution also works if I leave in the JQuery and just use square brackets with Flip.getState, which also eliminates the second Flip.from statement. I really appreciate your taking the time to code the answer for me! Awesome.