Global behavior lives on FX.config at runtime, or window.__FX_CONFIG__ if set before fx.js loads. On a WordPress site, the Settings tab writes __FX_CONFIG__ for you — this page is for theme/script authors who want to set it directly, or go beyond what the admin UI exposes.
Options
| Key | Default | Description |
|---|---|---|
sectionSelector | 'section' | CSS selector for containers that enable bare-class and tag-map auto-triggering. |
scrollStart | 'top 85%' | Default ScrollTrigger start position for scroll-triggered animations. |
scrollOnce | true | Whether scroll animations play only once, or replay every time. |
tagMap | null | Map of CSS selectors → effect names for zero-class animation. See Tag Map. |
disableMobile | false | Skip all animations below mobileBreakpoint. |
mobileBreakpoint | 768 | Width threshold (px) used by disableMobile. |
speedMultiplier | 1 | Multiplies every animation's duration, delay and stagger. |
respectReducedMotion | true | Skip animations when the OS "reduce motion" setting is on. |
excludeSelectors | '' | CSS selector — matching elements are never animated. |
Setting it before load (recommended)
Put this in an inline script that runs before fx.js loads:
window.__FX_CONFIG__ = {
sectionSelector: 'section, .wp-block-group',
scrollStart: 'top 80%',
tagMap: {
'h1,h2,h3': 'textReveal',
'img': 'reveal',
},
};
On WordPress you don't need this: the plugin already passes your Settings to FX this way. Its Custom JS runs after fx.js, so change FX.config there and call FX.init() (see below).
Setting it before fx.js runs means the very first scan already uses your values — no re-init needed.
Changing it at runtime
FX.config.scrollStart = 'top center';
FX.config.tagMap = { 'h1,h2,h3': 'textReveal', 'img': 'reveal' };
FX.init(); // re-scan the DOM with the new config
Always call FX.init() after changing FX.config at runtime — FX doesn't watch the object for changes.
WordPress: injecting config via PHP
If you're configuring FX from a theme instead of the plugin's admin page:
function my_theme_fx_config() {
$config = array(
'tagMap' => array(
'h1,h2,h3,h4,h5,h6' => 'textReveal',
'p' => 'textReveal',
'img,video' => 'reveal',
),
'sectionSelector' => 'section, .wp-block-group',
);
wp_add_inline_script(
'fx-sdk',
'window.__FX_CONFIG__ = ' . wp_json_encode( $config ) . ';',
'before'
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_fx_config' );
If you're using the Fancoolo FX plugin, prefer the Settings tab or the Custom JS tab instead — the plugin already builds and injects __FX_CONFIG__ from those settings on every page load.