GSAP correct location Astro?

[eb4]

Having a difficult time with placing gsap plugins into a src/gsap folder, JavaScript should be here because Astro framework can bundle JavaScript for performance benefits, have benefit of tree-shaking, code-split, and will be optimized and processed by Vite, Astro's build system.
But this is causing lots of errors vs a public/gsap folder where it is out in the open. I am not doing it via npm pkg, w. the paid plugins I have that is a sh-tshow, and I have to still put them somewhere. 

 

where does this go? the Ai's are split on where. thx  

[Rodrigo]

Hi,

 

It should be just as any other project that runs on any of these bundling suftwares (Webpack, Vite, Rollup, etc), install the files using the .npmrc file, then import and use them. One important detail is to never push your .npmrc file with your token in it to a public repo.

 

Here is a simple demo of how it works with the MorphSVG Plugin deployed on Vercel:

https://github.com/rhernandog/astro-gsap-bonus-vercel/blob/master/src/pages/index.astro#L127

 

Here is the live preview, you can see the Astro logo getting morphed:

https://astro-gsap-bonus-vercel.vercel.app/

 

Hopefully this helps

Happy Tweening!

[eb4]

My dislike hate for gsap has increased, I am only posting here as a public responsibility. I don't wish this on anyone.

As of Jan 18, 2025 and since last January, Astro and GSAP does not work if you are using TS. 
Spent weeks pulling my hair out why this 404's when local. 
Works fine in React.  Make a react dummy site, register the .npmrc for first time (I am not 100% sure if you need to do this or not, I just don't want to spend anymore time w. gsap) then put it in the root of your Astro- again idk if you need to. 

## The Fix

The only way you can get it working is use CDN links for the free plugins and then in your public folder put your paid gsap so in your astro site; 

public/gsap 

Then link to them the same way, inline script, this way you get around CORS headaches. 
where example.com is your Astro site 

<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/TextPlugin.min.js"></script>
<script is:inline src="https://example.com/gsap/SplitText.min.js"></script>

IF you are on netlify, may need to add to your netlify.toml file on your site to not get CORS errors. 

## Proof

Proof this via npm or in a local folder with Astro  doesn't work. Glad they sold the company, and the market can step in with something better.
https://github.com/greensock/GSAP/issues/548

Further proof, check the latest gsap npm w. TS here;
https://arethetypeswrong.github.io/?p=gsap%403.12.5

gsap v3.12.5 (npm, unpkg)

 

"Problems

🥴

Internal resolution error

Import found in a type declaration file failed to resolve. Either this indicates that runtime resolution errors will occur, or (more likely) the types misrepresent the contents of the JavaScript files.

Expand the raw details below to see the imports that failed to resolve."

 

[eb4]

netlify.toml

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET"
    Access-Control-Allow-Headers = "*"

Probably not great for your security but test and see. Also inline all/any script tags when using gsap w. Astro. Ai's may tell you to go down a gsap.d.ts rabbit hole, but its not needed if CDN. I will probs get yelled at for suggesting premium plugins being made "public" but way past giving any f's and they sold the company so who cares. New/temp "dev" so maybe some fancy guy can tell me this is all a bunch of s-, again wasted too much time searching for a solution. 

[GreenSock]

11 hours ago, eb4 said:

Proof this via npm or in a local folder with Astro  doesn't work. Glad they sold the company, and the market can step in with something better.
https://github.com/greensock/GSAP/issues/548

Further proof, check the latest gsap npm w. TS here;
https://arethetypeswrong.github.io/?p=gsap%403.12.5

gsap v3.12.5 (npm, unpkg)

 

"Problems

🥴

Internal resolution error

Import found in a type declaration file failed to resolve. Either this indicates that runtime resolution errors will occur, or (more likely) the types misrepresent the contents of the JavaScript files.

Expand the raw details below to see the imports that failed to resolve."

 

I'm not much of a TypeScript guy myself - do you have any idea what any of this actually means or how it would be resolved without causing any problems with other existing builds? It's odd because tons of TypeScript folks have been successfully using GSAP without any problems whatsoever, so it's strange to me that suddenly in this context there are show-stopping issues. I'd love to get them resolved... I just also worry about "solutions" that may cause breaking changes for other existing projects that leverage GSAP, you know? As the Github issue author states, his suggestion would likely cause breaking changes and he wasn't really recommending it. 

 

I'm very sorry to hear about your frustration and I'm eager to resolve whatever I can... I just feel pretty lost as to how to do that exactly without causing huge headaches for other people too. Perhaps there's a pretty simple solution that's universal? 

[eb4]

This "FIX" ONLY pertains to websites built with ASTRO (https://astro.build).

Probably because Astro is new, and their release cycles are super fast. I think it's the most exciting framework for web development. My issue is that I bought this not knowing it doesn't work- and I had to waste a huge amount of time, when the owner could have just updated a requirements page with works on react, next.js, htmx, and Astro*   (*only works with inline scripts and a CDN or hosted on your domain and used as a hard link as: https://example.com/gsap/gsap.min.js )  That's all they would have to put.

As per the github- read it again, use Claude if you don' t understand what the gsap head founder is actually saying there.

My interpretation is that he is stuck with a legacy software (like windows w. backward compatibility), there are FAR better ways to package and sell this software but he can't change because he faces a high hurdle, breaking changes and breaking everyone's website- to give credit it has been around since '10 or something like that.

It's very smart that he sold to webflow, because now they can control how it gets implemented, as its a perfect closed environment. I figure in about 6mos or less, they will stop selling this plugin outside webflow and he can blame it on them later, unless webflow wants to suck every dime out of everyone to pay for the acquisition- but yet not release a new version or any updates. 

Thank god, motion and tailwind animations are getting better and better. So willing to take the SEO hit on motion rather than deal with gsap.

[Rodrigo]

Hi,

 

Can you share an approximation of your project either in a repo or zip file that we can clone/download and play around with? Of course no need to include either your token or private GSAP files (we'll look into adding those).

 

I just created a simple Astro project with some TS in it (I'm not an expert in TS TBH) and deployed to netlify without any issues:

https://github.com/rhernandog/astro-ts-gsap-bonus-netlify

 

https://astro-ts-gsap-bonus.netlify.app/

 

So it would be great if we can get some kind of approximation of your use of GSAP in your project so we can test a more real-life scenario and see what can we find.

[GreenSock]

3 hours ago, eb4 said:

My interpretation is that he is stuck with a legacy software (like windows w. backward compatibility), there are FAR better ways to package and sell this software but he can't change because he faces a high hurdle, breaking changes and breaking everyone's website- to give credit it has been around since '10 or something like that.

Another interpretation is that I place a high value on backwards compatibility and I'm trying to do my best to not mess up the hundreds of thousands of developers who rely on GSAP every day. 

 

3 hours ago, eb4 said:

I figure in about 6mos or less, they will stop selling this plugin outside webflow and he can blame it on them later, unless webflow wants to suck every dime out of everyone to pay for the acquisition- but yet not release a new version or any updates. 

Ouch. 🙁

 

Webflow has been very clear about their commitment to helping GSAP thrive, even outside of Webflow. I hope you see the fact that the founder of GSAP is personally answering your forums post on a Saturday to be evidence of my intention to keep GSAP standalone going strong. GSAP has always been extremely strong in terms of community.  

 

I truly am sorry about the hassles you ran into with Astro and I appreciate you posting the solution you found. I'm very open to hearing any specific suggestions for improving how it works with GSAP. I hope you'll extend some grace for the fact that it can be overwhelming (for me at least) to try to accommodate the myriad of build tools, frameworks, bundlers, linters, packaging nuances, and highly opinionated ecosystems. 🤕

[PixelSavant]

I have not had any issues building my portfolio site built with Astro, TS and hosted on Cloudflare Pages free tier. I paid for GSAP premium and followed the documentations npm install instructions. I installed it both globally and in the projects package.json. Once I added my access token to my local npm install everything built locally fine. It failed initially when trying to build on Cloudflare, but once I added the .npmrc everything just worked. As mentioned previously just make sure your repo is private and you should be fine. Cloudflare also allows you to set build environment vars so you dont even need to use .npmrc. I would hope Netlify would offer similar settings.  Once the install was complete all the type declarations just worked, all the paid plugins could be imported like any other script. When I started writing a new class object in VS Code it auto completed my declaration of a new timeline as

 

tl: GSAPTimeline;

 

From my experience so far I have had no issues with Astro, Typescript, and GSAP premium plugins building with NPM. I can share some more of my setup and config if anyone is curious

 

[Rodrigo]

Hi @PixelSavant and welcome to the GSAP Forums!

 

25 minutes ago, PixelSavant said:

Cloudflare also allows you to set build environment vars so you dont even need to use .npmrc. I would hope Netlify would offer similar settings

Indeed Netlify does gives you the opportunity to replace your token for an environmental variable as mentioned in the docs:

https://gsap.com/docs/v3/Installation/guides/Netlify

 

Thanks for sharing your experience and I'm glad that you were able to develop and deploy your Astro app without any issues 🥳

 

Finally thanks for being a GSAP Club member and supporting GSAP! 💚

 

Happy Tweening!

[Cassie]

While we're throwing some astro love around - Manoela at codrops just put together a lovely free astro template which uses GSAP 💚

https://tympanus.net/codrops/2025/02/05/players-club-free-astro-template/