DEVELOPERS

Using Without WordPress

The FX SDK (fx.js) is a plain IIFE with no build step — it works on any HTML page, static site, or JS framework, as long as GSAP and its plugins load before it.

Install via npm

npm install gsap fancoolo-fx

This installs:

  • GSAP — the animation engine (core plus all plugins, including ScrollTrigger and SplitText). All GSAP plugins are free as of GSAP 3.12.
  • fancoolo-fx — the class-driven animation wrapper. Package: fancoolo-fx on npm.

Load the scripts

Add one classic script tag (not a module) for each file, in this exact order — GSAP core, then its plugins, then FX:

  1. node_modules/gsap/dist/gsap.min.js — GSAP core
  2. node_modules/gsap/dist/ScrollTrigger.min.js — GSAP plugin
  3. node_modules/gsap/dist/SplitText.min.js — GSAP plugin
  4. node_modules/fancoolo-fx/src/fx.js — Fancoolo FX

The npm package README has a copy-paste snippet with the full tags.

Order matters — GSAP core must load before its plugins, and all three must load before fx.js (FX registers the plugins and logs an error to the console if any are missing).

Add the FOUC prevention CSS

Outside WordPress there's no plugin to inject this automatically — add it yourself. See FOUC Prevention for the full rule set and why the reduced-motion companion rule matters.

Add classes

<h1 class="fx-text-reveal-pl">This animates on page load</h1>

That's it — no JavaScript required for the basic case.

Compound sequences

For dynamic content or animations you want to choreograph in code, load a project-specific script after fx.js and use the JavaScript API:

// animations.js — loaded after fx.js
document.addEventListener('DOMContentLoaded', function () {
    var hero = document.querySelector('.hero');
    if (hero) {
        FX.scaleIn(hero.querySelector('.card'), { trigger: 'scroll', scrollTrigger: { trigger: hero } });
        FX.textReveal(hero.querySelector('h2'), { trigger: 'scroll', delay: 0.2, scrollTrigger: { trigger: hero } });
    }
});

File structure

your-project/
├── node_modules/
│   └── gsap/dist/
│       ├── gsap.min.js
│       ├── ScrollTrigger.min.js
│       └── SplitText.min.js
├── src/
│   └── fx.js
├── package.json
└── index.html