What's New and How to Use

Page builder -> Select a button on the canvas.

Open the Animation tab in the sidebar -> Hover Animation

Pick from 20 effects: Grow, Shrink, Pulse, Bounce In, Rotate, Float, Skew Forward, Wobble Horizontal, Buzz, Fade, Sweep To Right, Sweep To Bottom, Radial In, Bounce To Top, Ripple Out, Outline In, Underline From Center, Shadow, Glow, Box Shadow Outset.

Preview before you commit

Hover an effect card and it plays on the selected button on the canvas, so you can compare options side by side.

Tune the effect - every effect exposes Duration (0.1–3s), Delay (0–5s) and Easing (Linear, Ease-in, Ease-out, Ease-in-out). Beyond that, the panel shows only the controls that apply to the effect you picked:

Effect group                               Effects                                                                                   Controls

Scale                 Grow, Shrink, Pulse, Bounce In                                                             Scale (0.5×–2×)

Rotation                 Rotate, Skew Forward                                                                             Angle (−180° to 180°)

Movement         Float, Wobble Horizontal, Buzz                                                             Distance (0–50)

Background         Fade, Sweep To Right, Sweep To Bottom, Radial In, Bounce To Top    Fill Colour

Border                 Ripple Out, Outline In, Underline From Center                                     Border Colour, Thickness (1–10px)

Shadow                  Shadow, Glow, Box Shadow OutsetShadow Colour,                             Blur (0–50px), Spread (0–50px)

Every effect ships with brand-appropriate defaults, so it looks right the moment you pick it, adjusting is optional.

It behaves correctly out of the box - hover is automatically switched off on touch devices and screens under 1024px, so mobile visitors never land in a stuck hover state. If a button has an entrance animation, hover waits until that entrance has finished before it becomes active. Buttons that appear more than once on a page — sticky bars, navigation clones — animate identically to the original.

Impact

• Per-button micro-interactions from the sidebar, no CSS knowledge needed.
• More clickable-feeling CTAs, which is where hover states earn their keep.
• Effect-specific controls mean you only see settings that do something - no guessing which knob applies.
• Cleaner published pages: hover settings are applied as styling rather than leaking into page markup.
• Entrance animations on the canvas also got steadier as part of this work - they no longer replay every time a component remounts (drag and drop, device switch, edit), and they wait until the element is actually on screen instead of flashing early.

Where to Find It

Page Builder → Select a button → Animation tab (sidebar) →  Hover Animation

Effect parameters appear in the Adjust panel below the effect grid, once an effect is selected.