Animate a group of child elements one after another — a row of images, cards, or list items — using a single class on their container, instead of adding an effect class to every child.
Syntax
fx-stagger-all-[selector]
Put this class on the container, paired with an effect class (with -pl or -st, or bare) on the same container. The container itself is never animated — only the children matched by selector are.
<div class="gallery fx-stagger-all-[img] fx-reveal-st">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</div>
Each matched child gets the paired effect (fx-reveal in this example), staggered 0.15 seconds apart, using the same trigger mode as the container's effect class (-st here).
Without an effect class on the same container, fx-stagger-all-[…] does nothing — it needs a partner class to know which effect to run.
Selector syntax
The selector goes inside the brackets, same underscore-for-space rule as other modifiers:
<!-- Target elements matching .card > img -->
<div class="fx-stagger-all-[.card_img] fx-scale-in-st">…</div>
<!-- Target multiple tags -->
<div class="fx-stagger-all-[img,video] fx-reveal-st">…</div>
Building this with the admin page
The Effects tab (Appearance → Fancoolo FX) has a dedicated stagger-children builder below the effect gallery — pick the effect, type the child selector, and copy the generated classes. See Effects Tab.