Motion.page · Visual animation builder

Click animations that play and reverse.

Wire a click to any element and it opens a panel, an accordion row, or a mobile menu, with the second click deciding whether it reverses, restarts, or plays again. There's no handler to write and no open/closed state to track by hand. Try it below.

Get instant access or try free for 7 days

Loved by 6,000+ designers.

toggle: reverse

The Falls Suite

Cedar, linen, and the sound of water: sleeps two, from €340/night.

320 sq ft · king bed · river-facing balcony

The product

Watch it actually work.

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

Inside the Builder

Two selectors, two switches.

Set a 1st click selector, add an optional 2nd click selector, and choose Restart or Reverse for what the second click does. Start from scratch or from a preset such as Smooth Transitions, Creative Effects, or Text Reveals, then switch its trigger to Click.

Motion.page Builder Click trigger panel: the 'Prevent default actions of the element' switch, 1st click scoped to .reveal-btn, 2nd click in sync with the 1st click selector, and the Restart animation and Reverse animation switches — The Click trigger panel: 1st click scoped to `.reveal-btn`, 2nd click in sync, with the Restart and Reverse switches below. Builder v3.2.10.

Pick an element

Click anything on your page and switch its trigger to Click. The Builder edits the live site.

Set 1st and 2nd click selectors

A selector is just the CSS class or ID that names an element. Leave 2nd click in sync with the 1st, or point it at a separate element: a close icon, a different button entirely.

Choose Restart or Reverse, publish

Two switches decide what a second click does. Leave both off and every click just plays forward.

Works with every platform you already use

The second click

Reverse it, or replay it.

The first click always plays. What the second click does is your call, and the difference shows when a click lands mid-animation. Try interrupting these:

A third shape, Play, is the default when both switches are off. Every click of the main control starts a fresh forward run.

You just clicked mid-animation and watched it reverse instead of restart. Wire that same trigger to your own buttons in a few minutes.

Get instant access or try free for 7 days

Under the hood

Click, without the edge cases.

Toggling on click sounds simple until nested selectors, lists, and links get involved. The engine running this page was built to handle all of them.

Three toggle shapes: Reverse alternates open and closed. Restart replays from scratch on every second click. Play, the default, makes every click of the main control a fresh forward run; on a separate close control, Play instead continues from wherever the timeline stopped. The Builder's Restart and Reverse switches cover the two you'll actually reach for.
Trigger decoupled from the animated element: The element you click and the element that animates don't have to match: a button can drive a panel, an icon can drive a menu, entirely different nodes.
A dedicated close control: Add a second click selector and it always performs the toggle action, while the first click always restarts: a close icon that reliably closes, with no alternating state to track.
Per-element instances: Play each iteration individually gives every matched element its own click state, so a list of cards or accordion rows toggles one at a time instead of in lockstep.
A prevent-default switch: Calls event.preventDefault() on the click, useful when the trigger is a link or a submit button that shouldn't also navigate or submit.

What is a click animation?

A click animation responds to a click rather than the clock, the scrollbar, or the pointer's position: press a button, and a timeline plays. What a second click does is the interesting part: it can alternate the animation open and closed, replay it from scratch, or simply start another forward run.

Reverse is the accordion pattern: click once to open, click again to close. Restart replays from the beginning every time, useful for a flash or a notification that should always look the same. Play, the default, starts a fresh forward run on every click of the main control.

Motion.page adds a second control: the trigger and the animated element can be different nodes entirely, and an optional 2nd click selector, a close icon or a different button, always performs the toggle action while the primary control always restarts. With Play each iteration individually on, every matched element in a list gets its own click state.

Questions about Click.

Can't I just write an onclick handler?

You can, until the edge cases arrive. A hand-rolled handler has to track alternating open/closed state, survive a click that lands mid-animation (reverse from current progress, not snap), scope correctly when clickable elements nest, and keep per-card state across a list. The Click trigger handles all of that, and the published code is dependency-free: nothing extra to load or keep updated.

Do I need to write code?

No. Select an element, switch its trigger to Click, set the 1st and 2nd click selectors, and choose Restart or Reverse for the second click. The published code is generated for you.

Does the second click resume where it paused?

No, nothing resumes on the main control: a fresh first click always replays from the beginning. With Reverse on, the second click plays backward from wherever the animation currently is. Interrupt it mid-open and it closes from that exact point instead of snapping to the end first.

Can I use this for an accordion?

Yes, it's the canonical use case. Point the trigger at the accordion title with Reverse selected: first click opens, second click closes. Add a separate close-icon selector as the 2nd click target if you want a dedicated close control instead of a toggle.

Does it work in WordPress and Desktop?

Yes. The Click trigger ships in both the Motion.page WordPress plugin and the Desktop app, with the same 1st/2nd click and Restart/Reverse controls, and it clicks the buttons Elementor, Bricks, Divi, or Gutenberg output like any other element.

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 →