Modifier classes fine-tune an effect on a single element — timing, easing, where it triggers — without touching JavaScript or inline styles.
Syntax
fx-{property}-[{value}]
Bracket syntax was chosen because Gutenberg's "Additional CSS class(es)" field accepts it, and it lets a value contain decimals.
Spaces in values: CSS classes can't contain spaces, so wherever a value would normally have one, use an underscore (_) instead. top center becomes fx-start-[top_center]. Values that are fully numeric are read as numbers; anything else — including a string that used _ for a space — is kept as text, so fx-start-[80%] stays text too.
Available modifiers
| Modifier | Default | Applies to |
|---|---|---|
fx-duration-[n] | varies by effect (see each effect's page) | All effects except Tilt In and Parallax |
fx-delay-[n] | 0 | All effects except Parallax |
fx-stagger-[n] | varies | Text Reveal, Type Writer, Split Words (delay between lines/characters/words) |
fx-ease-[name] | varies | All effects except Parallax |
fx-start-[pos] | top 85% | Any scroll-triggered animation (-st, bare, Tilt In, Parallax) |
fx-y-[n] | 50 | Parallax only — shift distance in pixels |
fx-scrub-[n] | 0.6 | Draw SVG only — switches it into scrub mode and sets the smoothing |
Each effect's own page lists which of these actually change its animation — see the Effects overview.
Duration
<h2 class="fx-text-reveal-st fx-duration-[0.5]">Quick reveal</h2>
<h2 class="fx-text-reveal-st fx-duration-[3]">Dramatic slow reveal</h2>
Delay
<h2 class="fx-text-reveal-st">First, no delay</h2>
<p class="fx-text-reveal-st fx-delay-[0.3]">Second, 0.3s later</p>
Delay stacks on top of the automatic 0.15s sibling stagger described in Trigger Modes — a 3rd sibling with fx-delay-[0.5] waits 0.3s (auto-stagger) + 0.5s = 0.8s total.
Stagger
Only meaningful on Text Reveal, Type Writer and Split Words, where it controls the gap between the lines/characters/words inside one element:
<p class="fx-split-words-st fx-stagger-[0.08]">Words rise in one by one.</p>
Ease
Any GSAP easing name:
<div class="fx-reveal-st fx-ease-[bounce.out]">Bouncy</div>
<div class="fx-reveal-st fx-ease-[elastic.out(1,0.3)]">Springy</div>
<div class="fx-reveal-st fx-ease-[none]">Constant speed</div>
Common values: power3.out (default), power2.inOut, power4.out, back.out(1.7), elastic.out(1,0.3), bounce.out, none.
Start Position
Only affects scroll-triggered animations. Uses GSAP's ScrollTrigger format: "triggerPosition viewportPosition".
<h2 class="fx-text-reveal-st fx-start-[top_center]">Triggers at viewport center</h2>
<img class="fx-reveal-st fx-start-[top_90%]" src="photo.jpg" alt="" />
| Value | Meaning |
|---|---|
top 85% | Default — element near the bottom of the viewport |
top center | Element at the viewport's vertical center |
top 70% | Element 70% down the viewport |
top top | Element at the very top of the viewport |
center center | Element vertically centered |
To change the default for every animation on the site instead, use the Start position field on the Settings tab.
Combining modifiers
<h2 class="fx-text-reveal-st fx-duration-[2] fx-stagger-[0.25] fx-ease-[power2.inOut]">
Slow, wide stagger, smooth easing
</h2>
Priority
- Modifier class on the element (highest priority)
- Site-wide setting from the Settings tab
- Effect's built-in default (lowest priority)