Mattiabf Posted November 20, 2023 Share Posted November 20, 2023 Hi everyone! Just a simple question: where do you prefer to enqueue gsap scripts? I would like to place them in footer to increase website performance, but they have issues if for whatever reason the script contains animation loads before them. Also, I find that some plugins (ex. Flip) works only if they are placed in footer (for me, at least). What is your choice? Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 20, 2023 Share Posted November 20, 2023 Hi @Mattiabf welcome to the forum and thanks for being a Club member 🎉 From the docs https://gsap.com/docs/v3/Installation#install-helper. You want them in the footer, because then they get loaded when your HTML is ready and thus there are elements ready to animate and indeed only after you've loaded the plugin you should load your GSAP code, see below Quote Typically it's best to put the GSAP script tag before your closing body tag and before your custom GSAP code. <html> <head> ... </head> <body> <div className="animateMe"></div> <h1>Hello GSAP!</h1> <!-- Put your script after the HTML --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <!-- And put your own code after - any GSAP code you write needs to have access to the library --> <script src="myCustomCode.js"></script> <script> // custom code using GSAP </script> </body> </html> Hope it helps and happy tweening! 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted November 20, 2023 Share Posted November 20, 2023 Hi, On top of @mvaneijgen's advice, is worth noticing that you can add the CDN links in the <head> section, but they will pause the rest of the page while they're being downloaded: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes So you can use defer or async when you add them to the <head> section. Granted GSAP's file size is rather small, so that shouldn't take too long ether way. Besides the information about the <script> tags, is always better to just add them before the closing </body> tag in your HTML, just to be sure. Happy Tweening! 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