DEVELOPERS

Configuration

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

KeyDefaultDescription
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.
scrollOncetrueWhether scroll animations play only once, or replay every time.
tagMapnullMap of CSS selectors → effect names for zero-class animation. See Tag Map.
disableMobilefalseSkip all animations below mobileBreakpoint.
mobileBreakpoint768Width threshold (px) used by disableMobile.
speedMultiplier1Multiplies every animation's duration, delay and stagger.
respectReducedMotiontrueSkip 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.