Breakdance4fun Logo

How to use GSAP with Breakdance

Good news, Breakdance already uses GSAP!!!
But it only loads the GSAP files when they are needed. This is great for performance, obviously, but it also means that we need to know when they're loaded so we don't have to load them manually.

FYI, Breakdance v2 uses GSAP v3.12.2

When GSAP is actually used ?

The files gsap.min.js and ScrollTrigger.min.js are loaded when we use the Advanced / animation feature:

gsap-bd-animations

gsap.min.js is also loaded when we use the POPUP animation option (but not ScrollTrigger):

gsap-bd-popup

How to know if the page is already loading GSAP ?

If you are in doubt, you can simply open your page in the frontend and check with the devtools, which is actually the best way to find out. For example here, we can see that the two GSAP files are loaded in this page, so we don't need to use a snippet manager or any other method to load the files ourselves.

devtools-gsap-network-js

Introducing the "Supa Code Block" element

This element will loads the GSAP files only once, and only when they are needed.
You just have to select the dependencies you need in the options tab.
So you don't have to worry if the GSAP files are already used or not.

More info : https://breakdance4fun.supadezign.com/custom-element/supa-code-block/

Supacodeblock dependencies option