Stand out
Work that gets noticed.
The kind of motion clients point at when they say they want something special.
The effects
Nine of them, tuned and ready to drop into Elementor, Gutenberg, WPBakery or raw HTML. Scroll down, find the one your next project needs, and take the settings that made it. 3 of the eight are free.
Your system is set to reduce motion, so nothing here animates — the plugin respects that setting and never starts. What you see below is the resting state.
Panels that hand off one to the next, so every point lands on its own.
Use it for: Service pages, feature tours and pitches — anywhere three or four ideas need to arrive one at a time instead of competing in a wall of text.
Stand out
The kind of motion clients point at when they say they want something special.
No new tools
Elementor, Gutenberg, WPBakery or raw HTML — your section, your styling.
Stays fast
One small file, no framework, nothing loaded from anyone else’s server.
No lock-in
The motion is a setting you copy, not a plugin your client can never remove.
{
"effect": "clip-stack",
"version": 1,
"params": {
"shape": "inset",
"direction": "up",
"easing": "ease-in-out-cubic",
"depth": 0.14,
"cascade": 0.85,
"dim": 0.4,
"lift": 0.25,
"pace": 1,
"stageH": 80
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
Cards that arrive one at a time and stay, so the argument builds instead of replacing itself.
Use it for: Pricing tiers, case studies and process steps — anywhere the reader should still see what came before while the next point lands.
It stays
Each card settles under the next, so the whole argument is still on screen at the end.
Cheap
It moves one property. No clipping, no filters, no cost to your scores.
Your card
Give it a shadow and a radius in your builder — nothing here is clipped, so both just work.
Any builder
Tag the section, paste the recipe, done.
{
"effect": "card-stack",
"version": 1,
"params": {
"direction": "down",
"offset": 0.07,
"easing": "ease-out-cubic",
"shrink": 0.03,
"pace": 1,
"stageH": 80
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
The page holds still and your content moves sideways.
Use it for: Portfolios, process steps and product ranges — a row of work that deserves more room than a grid gives it.
Portfolio
Each piece gets the screen to itself instead of a thumbnail in a grid.
Process
Steps that advance as they scroll, at the pace you set.
Range
A long row of anything, without sending anyone to a second page.
Solid
Holds up on a phone, a laptop and the client’s enormous monitor.
{
"effect": "pin-horizontal",
"version": 1,
"params": {
"panelWidth": 62,
"gap": 24,
"easing": "linear",
"pace": 1.1
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
Headlines that assemble themselves, word by word.
Use it for: Hero statements and section openers — the line you want read slowly instead of skimmed.
Make it land
Motion buys you the half-second a good headline needs.
Still yours
Links and line breaks survive it, so nothing about your copy changes.
{
"effect": "text-stagger",
"version": 1,
"params": {
"unit": "word",
"direction": "up",
"distance": 36,
"stagger": 0.65,
"easing": "ease-out-cubic",
"finish": 0.4,
"length": 0.7,
"once": false
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
Content that arrives as you reach it, instead of just sitting there.
Use it for: Everywhere. The workhorse — it lifts a whole page without drawing attention to itself.
The workhorse
The difference between a page that feels designed and one that feels assembled.
Tuned by you
Distance, speed and direction are yours to set.
{
"effect": "reveal",
"version": 1,
"params": {
"direction": "up",
"distance": 64,
"zoom": 0.12,
"easing": "ease-out-cubic",
"finish": 0.5,
"length": 0.7,
"once": false
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
Images with depth, so a flat section stops looking flat.
Use it for: Hero banners, quote breaks and full-width image bands — the sections that carry a page’s mood.
Depth
The image drifts against its frame, and the section gains a sense of space.
Clean edges
Framed and scaled so the picture always fills its box.
{
"effect": "parallax",
"version": 1,
"params": {
"axis": "vertical",
"speed": 0.6,
"zoom": 1.25,
"invert": false
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
Sections that open through a shape instead of simply appearing.
Use it for: Big reveals — the product shot, the finished build, the before-and-after.
The reveal
An opening that tells people something worth seeing is arriving.
Your call
Soft-edged or sharp, opening from wherever you choose.
{
"effect": "mask-reveal",
"version": 1,
"params": {
"shape": "circle",
"direction": "center",
"feather": 0.15,
"easing": "ease-out-cubic",
"finish": 0.5,
"length": 0.7,
"once": false
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
Reveals in the shape of anything — including their logo.
Use it for: Brand moments and campaign pages, where a plain rectangle would waste the opportunity.
On brand
Drop in a logo path and the section blooms into view through it.
Or pick one
Blob, star, hexagon, heart, diamond or burst — no drawing required.
{
"effect": "svg-mask",
"version": 1,
"params": {
"shape": "blob",
"direction": "center",
"feather": 0.1,
"easing": "ease-out-cubic",
"finish": 0.5,
"length": 0.7,
"once": false
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
Lines that draw themselves on as the reader arrives.
Use it for: Diagrams, signatures, maps and logo marks — the flourish that makes a page look hand-made.
The flourish
Works on any line art you already have — nothing to redraw.
{
"effect": "svg-draw",
"version": 1,
"params": {
"from": "start",
"order": "sequential",
"stagger": 0.5,
"easing": "ease-in-out-cubic",
"finish": 0.5,
"length": 0.8,
"once": false
}
}Copy it, paste it onto your own section, done. It carries the motion only — your content, your markup and your layout stay exactly as you built them.
3 are free on WordPress.org. A licence unlocks the rest, plus the template library, per-breakpoint control, and every new effect we ship — at no extra cost, for as long as you are subscribed.