Breakdance4fun Logo

How to load GSAP locally

Starting with v1.3, the GSAP files are loaded through a CDN instead of being loaded locally, as was the case in previous versions.

Devtools Gsap

What is GSAP ?

GSAP (GreenSock Animation Platform) is a set of Javascript libraries that can be used to create complex animations and interactive effects on websites or web applications.

Breakdance actually uses 2 GSAP files for its animation feature: gsap.min.js & scrollTrigger.min.js

How to load them locally.

By chance they have added a hook so we can easily change the URL and load them from anywhere we want.

Step 1

Download these 2 files and upload them somewhere on your server (example in the /wp-content/uploads/ folder)

https://unpkg.com/gsap@3.12.2/dist/gsap.min.js
https://unpkg.com/gsap@3.12.2/dist/ScrollTrigger.min.js

Step 2

Using your favorite Snippet Manager, add this PHP code (be sure to modify the URL if necessary):

add_action('breakdance_reusable_dependencies_urls', function ($urls) {
$urls['gsap'] = '/wp-content/uploads/gsap.min.js';
$urls['scrollTrigger'] = '/wp-content/uploads/ScrollTrigger.min.js';
return $urls;
});

Here is how it looks like with WPCODEBOX (aff link):

wpcodebox-gsap

That's it! We can check again to be sure the 2 files are loaded locally:

devtools-gsap-local