Every effect supports three ways of deciding when it plays.
| Mode | Suffix | When it animates |
|---|---|---|
| Page load | -pl | Immediately when the page finishes loading |
| Scroll trigger | -st | When the element itself scrolls into the viewport |
| Section trigger | _(no suffix)_ | When its section scrolls into the viewport — the section only decides which elements qualify, each element still triggers itself |
(fx-tilt-in and fx-parallax are always scroll-linked and ignore this choice — see Tilt In and Parallax.)
Page Load (-pl)
Plays as soon as the DOM is ready. Use it for hero headings, above-the-fold images, and anything visible without scrolling.
<h1 class="fx-text-reveal-pl">Visible immediately</h1>
Siblings sharing the same -pl class and the same parent are staggered automatically, 0.15 seconds apart:
<div class="hero-badges">
<span class="fx-spin-reveal-pl">Fast</span>
<span class="fx-spin-reveal-pl">Simple</span>
<span class="fx-spin-reveal-pl">Free</span>
</div>
Scroll Trigger (-st)
Plays when the element enters the viewport while scrolling — the most common mode for content below the fold.
<h2 class="fx-text-reveal-st">Appears on scroll</h2>
By default it fires when the top of the element reaches 85% down the viewport (top 85%), and plays only once. Both are configurable — see Settings Tab for the site-wide defaults, or override per element with fx-start-[pos] (see Modifier Classes).
Siblings with the same -st class and the same parent share that parent as the trigger, and stagger 0.15 seconds apart:
<div class="grid">
<img class="fx-reveal-st" src="1.jpg" alt="" />
<img class="fx-reveal-st" src="2.jpg" alt="" />
<img class="fx-reveal-st" src="3.jpg" alt="" />
</div>
Section Trigger (no suffix)
Add the bare effect class (no -pl/-st) to an element inside a <section> (or your configured section selector) and it scroll-triggers automatically:
<section>
<h2 class="fx-text-reveal">Auto scroll-triggered by section</h2>
<p class="fx-text-reveal">No suffix needed inside a section</p>
<img src="photo.jpg" class="fx-reveal" alt="" />
</section>
The section is only used to decide which elements qualify — each element still triggers on itself, exactly like -st. This mode exists so you can wrap a Group block in a section and drop bare effect classes on its children without thinking about suffixes.
If nothing outside a <section> animates with a bare class, that's expected — add -st instead, or widen the Section selector setting to include your container (e.g. .wp-block-group).