GSAP + Astro

[VecchiaPrugna]

What's the best way to integrate GSAP in a Astro project?
Here's what I did:

In my Layout.astro file I added a <script> where I perform the GSAP import

<script>

  import { gsap } from 'gsap';

</script>

However, If i try to use gsap in let's say index.astro (which uses Layout.astro) i get the a console error "gsap is not defined"

Why? How to make GSAP globally available in all pages, componenets etc

[GreenSock]

I have zero experience with Astro, so you might want to ask that community but I bet it'd be easiest for you to just load the minified file like: 

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

And then after that, you can use GSAP in a <script> tag. It's probably best to only run your code after the page loads, like:  

<script>
window.addEventListener("load", () => {
  gsap.to(...);
});
</script>

Or listen for a DOMContentLoaded event if you prefer not to have to wait until images load, for example. 

 

I hope that helps!

[zank]

window.addEventListener("load", ...)

 

should not be needed as by default the script tag is a module and is called once the dom is ready anyway

 

https://docs.astro.build/en/guides/client-side-scripts/#script-processing

 

 

you may need to use it if you use the script inline (is:inline)