Dependencies API

Oxygen's animation features load GSAP and ScrollTrigger from a CDN. The Dependencies API is
how you point them somewhere else — normally at copies you host yourself, so nothing on your
pages calls out to a third party.

The same registry is what stops a library being loaded twice when several elements need it.
That matters if you build elements: register the library once by name, reference the name
from each element, and Oxygen loads one copy however many of your elements are on the page.

Self-hosting GSAP

Two entries ship with Oxygen, and both are ordinary URLs you can overwrite:

Download both files, put them somewhere on your site, and repoint the keys with the
oxygen_reusable_dependencies_urls filter:

add_filter('oxygen_reusable_dependencies_urls', function ($urls) {
    $upload = wp_upload_dir();

    $urls['gsap'] = $upload['baseurl'] . '/js/gsap.min.js';
    $urls['scrollTrigger'] = $upload['baseurl'] . '/js/ScrollTrigger.min.js';

    return $urls;
});

From a plugin of your own, plugins_url() is the tidier source:

add_filter('oxygen_reusable_dependencies_urls', function ($urls) {
    $urls['gsap'] = plugins_url('js/gsap.min.js', __FILE__);
    $urls['scrollTrigger'] = plugins_url('js/ScrollTrigger.min.js', __FILE__);

    return $urls;
});

Two things to get right:

Move both together. ScrollTrigger is a GSAP plugin and expects a matching core version;
mixing versions breaks scrolling and sticky animations in ways that are painful to diagnose.
Self-host both or neither.

These are the files Oxygen's own animations run on. Repointing them changes what
entrance,
scrolling and
sticky animations use, not just anything of yours. A bad URL here stops animations working
site-wide.

The same filter changes the version rather than the host — assign a different CDN URL to
gsap and scrollTrigger and every animation runs on that build instead.

Sharing a library between your own elements

If you're building elements in Element Studio and more than one of
them needs the same library, register it here rather than hardcoding the URL in each
element's dependencies. Oxygen then loads exactly one copy no matter how many of your
elements a page uses.

Register the name:

add_filter('oxygen_reusable_dependencies_urls', function ($urls) {
    $urls['myPluginCharts'] = plugins_url('js/charts.min.js', __FILE__);

    return $urls;
});

Then reference it from each element, on Element Studio's
Dependencies tab, where the script URL would go:

%%BREAKDANCE_REUSABLE_MY_PLUGIN_CHARTS%%

The array is keyed by name; the value is the URL. Registering the same key twice means the
last filter wins, so prefix anything of your own — a bare charts is asking to collide with
another plugin.

Two details of the placeholder are easy to get wrong:

The prefix is always BREAKDANCE_REUSABLE_, on Oxygen as much as on Breakdance. There is
no OXYGEN_REUSABLE_ form; it isn't a hook name, it's a literal token the renderer looks
for.

The name inside the placeholder is upper snake case, and gets converted back to camel
case to look up the key. %%BREAKDANCE_REUSABLE_SCROLL_TRIGGER%% resolves to the
scrollTrigger entry, and myPluginCharts is referenced as
%%BREAKDANCE_REUSABLE_MY_PLUGIN_CHARTS%%.

If the name doesn't match a registered key, the placeholder is replaced with the name itself
rather than a URL — which produces a broken script tag rather than an error. A script that
silently fails to load is usually this.