For compound sequences or animating dynamically injected content, call FX functions directly through the window.FX global.
FX.textReveal(document.querySelector('.hero-title'), {
trigger: 'scroll',
delay: 0.3,
scrollTrigger: { trigger: '.hero-section' }
});
Set trigger: 'scroll' to enable ScrollTrigger. Pass scrollTrigger: { trigger: someEl } to use a different element as the trigger.
Effect functions
All functions accept (element, options):
| Function | Options |
|---|---|
textReveal(el, opts) | duration, ease, stagger, delay, trigger, scrollTrigger |
reveal(el, opts) | y (default 80), duration, ease, delay, trigger, scrollTrigger |
spinReveal(el, opts) | rotation (default -30), scale (default 0.9), duration, ease, delay, trigger, scrollTrigger |
bgReveal(el, opts) | duration, ease, delay, trigger, scrollTrigger |
scaleIn(el, opts) | scale (default 0.92), duration, ease, delay, trigger, scrollTrigger |
fadeIn(el, opts) | scale (default 0.95), duration, ease, delay, trigger, scrollTrigger |
blurIn(el, opts) | blur (default 12), duration, ease, delay, trigger, scrollTrigger |
clipUp(el, opts) | duration, ease, delay, trigger, scrollTrigger |
clipDown(el, opts) | duration, ease, delay, trigger, scrollTrigger |
tiltIn(el, opts) | rotationX (default 45), scale (default 0.8), opacity, perspective, transformOrigin, ease, scrub, end, scrollTrigger — always scrub-based |
typeWriter(el, opts) | duration, ease, stagger, delay, trigger, scrollTrigger |
drawSVG(el, opts) | duration, ease, delay, scrub, end, trigger, scrollTrigger |
parallax(el, opts) | y (default 50), scrub, end, scrollTrigger — always scrub-based |
splitWords(el, opts) | y (default 30), duration, ease, stagger, delay, trigger, scrollTrigger |
slideIn(el, opts) | x (default 100), direction ('left'/'right'), duration, ease, delay, trigger, scrollTrigger |
Every function also reads the same modifier classes already on the element (fx-duration-[…], fx-ease-[…], etc.). The priority is: a modifier class on the element wins first, then the option passed to the JS call, then the effect's built-in default.
Utility methods
| Method | Description |
|---|---|
FX.init() | Re-scans the DOM and applies FX classes found — call this after injecting new HTML (AJAX-loaded content, dynamic blocks). |
FX.refresh() | Calls ScrollTrigger.refresh() — re-measures trigger positions after a layout change (sidebar toggle, accordion, font load). |
FX.config | The live config object — same keys as window.__FX_CONFIG__, see Configuration. |
Verifying FX loaded
In the browser console:
FX
// {config: {…}, textReveal: ƒ, reveal: ƒ, spinReveal: ƒ, …}
If you see [FX] Missing dependencies in the console instead, GSAP/ScrollTrigger/SplitText didn't load before fx.js — check script order.