FanCoolo FX ships 15 effects. Add the class in the table below to any block's "Additional CSS class(es)" field, then pick when it should play — see Trigger Modes.
| Effect | Class | What it does |
|---|---|---|
| Text Reveal | fx-text-reveal | Lines of text slide up one after another from behind a mask |
| Reveal | fx-reveal | Slides up into place while fading in |
| Spin Reveal | fx-spin-reveal | Rotates and grows into place while fading in |
| BG Reveal | fx-bg-reveal | Rises a full height from below, good for backgrounds |
| Scale In | fx-scale-in | Grows slightly into place while fading in |
| Fade In | fx-fade-in | Fades in softly without moving |
| Blur In | fx-blur-in | Comes into focus like a camera lens |
| Clip Up | fx-clip-up | Wipes into view from the bottom edge |
| Clip Down | fx-clip-down | Wipes into view from the top edge |
| Tilt In | fx-tilt-in | Tilts upright in 3D as you scroll it into view (always scroll-linked) |
| Type Writer | fx-type-writer | Text appears one letter at a time |
| Draw SVG | fx-draw-svg | Draws the lines of an SVG as if by hand |
| Parallax | fx-parallax | Drifts at its own speed while the page scrolls (always scroll-linked) |
| Split Words | fx-split-words | Words rise and fade in one after another |
| Slide In | fx-slide-left / fx-slide-right | Slides in from the left or right while fading in |
Trying effects without writing a class
Open Appearance → Fancoolo FX → Effects. Hover any effect card for a live preview, click it to open the class builder, choose when it should play and copy the finished class — see Effects Tab.
Picking effects from the block sidebar
If the FX panel in the block sidebar setting is on, every block gets an "FX Animation" panel where you choose the effect and its timing from dropdowns — no class typing at all. See Block Editor Panel.
Fine-tuning an effect
Every effect accepts the same modifier classes for duration, delay, stagger, easing and scroll start position — see Modifier Classes.