Tag Map

Animate elements automatically by tag or CSS selector — no classes on individual blocks at all. Useful when you want every heading and image on the site to animate consistently, without editing each one.

How it works

The tag map is a list of CSS selectors mapped to an effect name. Any matching element inside a section (or your configured section selector) is scroll-triggered automatically, using the section as the trigger and staggering siblings the same way -st classes do.

Elements that already have an explicit fx-* class are skipped — the tag map only picks up elements nobody has already animated by hand.

Setting it up in the admin page

Go to Appearance → Fancoolo FX → Settings → Tag map and add rows:

Selector	Effect
h1,h2,h3,h4,h5,h6	Text Reveal
p	Text Reveal
img,video	Reveal

Each row has a CSS Selector field, an Effect dropdown, and a remove button. See Settings Tab.

Setting it up in JavaScript

In an inline script that runs before fx.js loads (sites without the WordPress plugin):

window.__FX_CONFIG__ = {
    tagMap: {
        'h1,h2,h3,h4,h5,h6': 'textReveal',
        'p,blockquote':       'textReveal',
        'img,video':          'reveal',
    }
};

Or at runtime, then re-scan the page:

FX.config.tagMap = { 'h1,h2,h3': 'textReveal', 'img': 'reveal' };
FX.init();

Effect names in the tag map are camelCase JS function names (textReveal, reveal, slideLeft, slideRight, …) — not the kebab-case class slugs. See JavaScript API for the full list.

Performance note

The tag map scans every section on the page. On pages with hundreds of elements, prefer explicit fx-* classes on just the elements you care about instead.