Hover effect

SVG Scribble Draw-On Image Hover

by Vanguardia · motionprompts.dev

A 3x2 grid of square image cards, each overlaid with two oversized scribbled SVG paths. On mouseenter the strokes draw themselves on (strokeDashoffset animated from full path length to 0 via getTotalLength) while their stroke-width swells from 200 to 700, and the card title rises word by word with a SplitText mask; on mouseleave everything reverses.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.5–1.5s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap+raf
Easing: power2
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, SplitText, lenis

Hover-triggered dual-layer SVG draw-on: two oversized scribble paths per card are dash-offset to their full getTotalLength() at init and tweened to 0 over 1.5s with power2.out (a fast initial sweep that decays into a slow tail, reading like a pencil stroke running out of speed), while the masked SplitText title rises yPercent 100->0 in 0.75s power3.out, 0.075s per word, entering 0.35s into the draw. Exit is deliberately asymmetric and faster — 1s un-draw, 0.5s word retreat staggered 0.05s from the end — and each crossing kills and rebuilds the timeline, so a rapid in/out re-fires from wherever the strokes happen to be. No scroll coupling of any kind; Lenis is present only as ambient page smoothing.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev28,823 chars

# SVG Scribble Draw-On Image Hover — Self-Drawing Strokes Over a Card Grid

## Goal
Build a page with a **3-row × 2-column grid of square image cards**. Each ca…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.