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 v1.3 uses GSAP v3.11.5

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 "GSAP Block" element

To make things easier, I have created a basic element called GSAP Block.
It's basically like the Code Block element, minus the PHP and CSS panels. His purpose ? It will load the GSAP files when this element is added to the page. And because it's a Breakdance element, it will only load them once, even if we already use the Animation feature.

So we don't have to worry about whether the GSAP files are already in use or not.

gsap-block

The element is available here : GSAP_Block.zip

Note that it's NOT a plugin. It's only the element that you add in your custom elements plugin folder.
More info : https://breakdance.com/documentation/developers/element-studio/