VecchiaPrugna Posted January 26 Share Posted January 26 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 Link to comment Share on other sites More sharing options...
GreenSock Posted January 26 Share Posted January 26 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! Link to comment Share on other sites More sharing options...
zank Posted March 24 Share Posted March 24 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) 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now