HoverMenu

An interactive menu where hovering each item triggers a unique image sliding in from off-screen with a rotation animation. The previous image stays as the background while the new image animates on top — creating a cinematic layered reveal. Built for portfolios, creative agencies, and fashion sites that need navigation as visually striking as the content itself.

Features

• Hover any menu item to trigger a unique image animation

• Images slide in from bottom-left with rotation effect

• Previous image becomes background for a layered depth effect

• Smooth 1.25s animation with custom cubic-bezier easing

• Default background image shown before any hover

• Configurable image rotation angle (−45° to 45°)

• Separate text and hover text color controls

• Full typography controls — size, weight, spacing, line height

• Adjustable gap between menu items

• Configurable component padding

• Mobile responsive — vertical layout under 768px

• Reduced font size, gap and padding on mobile automatically

• No dependencies

Property Controls

Content

• Menu Items

• Default Image

• Typography

• Colors

• Layout

• Image

Animation Details

• Initial state — image at 125% top, −50% left, rotated −30°

• Final state — image at 0% top, 0% left, no rotation

• Easing — cubic-bezier 0.22, 1, 0.36, 1 for smooth deceleration

• AnimatePresence with wait mode for clean layered transitions

• startTransition for React 18 performance

Use Cases

Portfolio navigation · Creative agency websites · Fashion and photography showcases · Product category browsers · Interactive landing pages · Editorial navigation · Luxury brand sites

SEO Keywords

framer hover menu · framer image menu · framer interactive menu · framer navigation component · framer menu animation · framer hover image · framer creative menu · framer portfolio navigation · framer menu reveal · framer animated menu · framer image navigation · framer agency component · framer hover animation · framer code component · framer visual menu