Motion.page · Visual animation builder

Hover animations with real choreography.

Most hover effects look fine until the pointer leaves and everything snaps back. Motion.page treats the exit as half the animation: pick what happens when the cursor moves on, wire it to any element visually, and publish. Hover the cards below to feel it.The cards below react to a mouse or trackpad; on touch they rest, because hover needs a pointer.

Get instant access or try free for 7 days

Loved by 6,000+ designers.

Project Brief

Scope, budget, and the timeline: one page.

Shoot Notes

Location, crew call sheet, and Tuesday's shot list.

Invoice #114

Net 30, due the 18th, paid on delivery.

The product

Watch it actually work.

Meet Motion.page: All-in-One platform for web animation · YouTube

Inside the Builder

Scope it, choose the exit.

In the Builder, hover is a trigger on an ordinary timeline. Point it at an element, decide what entering starts, and use the Mouse Leave switches for what leaving does. Presets work here too, if you'd rather not start from zero.

Motion.page Builder Hover trigger panel: Mouse over scoped to .shop-card, Play each iteration individually on, and the Mouse Leave switch list with Reverse animation enabled — Mouse over scoped to `.shop-card`, each iteration triggered individually, Reverse animation on for the leave. Builder v3.2.10.

Pick an element

Click anything on your page (a card, a nav link, a button). The Builder edits the live site.

Choose the Hover trigger

Tell it what to watch: the element itself, or a parent card. For grids, one switch gives each card its own reaction.

Pick a Mouse Leave behavior

Reverse, pause, stop, or restart: one switch list decides what happens the instant the pointer exits.

Works with every platform you already use

Mouse Leave

What the pointer leaves behind.

Reverse is the usual choice. It isn't the only one. Hover each card to compare all five.On a mouse or trackpad, hovering each card shows the difference.

onLeave: reverse

Eases back to rest the moment the pointer leaves.

onLeave: pause

Freezes mid-motion, exactly where the pointer left it.

onLeave: stop

Snaps back to the start: no reverse journey.

onLeave: restart

Snaps to the start, then plays forward once more.

onLeave: none

Stays put. Nothing plays until the next hover.

onLeave in the Motion engine · the Builder's Mouse Leave switches cover reverse, pause, stop, and restart

You just tried all five exits. Setting one up on your own site takes a few minutes.

Get instant access or try free for 7 days

Under the hood

Built for grids, not just one card.

Hover states have a reputation for jank at scale: flickering hitboxes, one listener per element. The engine running this page was built to avoid both.

Five ways to leave: Reverse, pause, stop, restart, none: mutually exclusive, pick exactly one. Stop resets the timeline to its start position rather than holding wherever it was.
Per-card independence: Switch on Play each iteration individually and every matched element gets its own trigger: hover one card in a grid, only that card reacts.
A leave delay that cancels itself: Reverse after a delay, and moving back over the element before it fires cancels the reverse: no half-played animation to untangle.
One shared pointer listener: Every hover trigger on the page shares a single pointer listener, batched to the browser's frame clock: one listener for the whole page instead of hundreds, so hover targets cost the same at any scale.
Rest-position hit-testing: An element's bounds are frozen the moment the pointer enters, so hover animations that move or scale the element don't flicker against a shifting hitbox.

What is a hover animation?

A hover animation responds to the pointer resting over an element rather than to a click, the clock, or the scrollbar. The cursor arrives and the element reacts. When the cursor leaves, one of five behaviors decides what happens next.

Reverse plays the animation backward to its start state, the default and the right choice for most lifts and reveals. Pause freezes the timeline exactly where it is. Stop resets it to the start without reversing through the motion. Restart snaps back and replays forward. None leaves it exactly as it landed.

Motion.page adds scope: a Hover trigger can watch one element or, with Play each iteration individually on, give every matched element in a list its own independent trigger, so a grid of cards responds one at a time instead of all reacting to whichever one you're pointing at.

Questions about Hover.

I can write :hover in CSS. Why pay for this?

A CSS :hover flips properties; the Hover trigger runs a timeline. That's several properties in sequence, per-card independence in a grid, a leave delay that cancels itself, and your pick of four leave behaviors beyond reverse, none of which CSS can express. You build it visually, and the published code is dependency-free.

What does the published code look like?

One trigger call on a normal timeline: .onHover({ each: true, onLeave: "reverse" }). The Builder generates that exact call. Pick Mouse over and a Mouse Leave behavior in the panel, and they become the target, each, and onLeave options.

Does it work with Elementor, Bricks, and Divi?

Yes, Motion.page animates the page your builder outputs. Click any element Elementor, Bricks, Divi, or Gutenberg rendered, attach the Hover trigger, and publish. No custom-code fields, no theme edits.

Does hover work on touch devices?

No, a hover animation needs a pointer that can rest over an element, and touchscreens don't have one. Pair the same element with a Click trigger, or give it a Page Load entrance, so touch visitors still get an animated moment.

If I hover one card in a grid, do the others react?

Only if you want them to. With Play each iteration individually off, every matched element shares one timeline and reacts together. Switch it on and each element gets its own independent trigger and rest-position bounds.

Does it work in WordPress and Desktop?

Yes. The Hover trigger ships in both the Motion.page WordPress plugin and the Desktop app, with the same Mouse over scoping and Mouse Leave controls.

What happens to my animations if I cancel?

Timelines published as local code live in your own site and keep running. They don't phone home. CDN-hosted delivery (where we host and serve the animation file for you) and further editing require an active license.

Still deciding? Try free for 7 days →