Hover effect

Griflan Hover Effect

by Vanguardia · motionprompts.dev

Three stacked service rows expand on hover with an elastic GSAP tween: a fanned stack of three images slides up behind the title, the title recolors from red to cream, and after 0.2s pill-shaped tags drop into the row under Matter.js gravity, bouncing and settling on an invisible floor. On mouseleave the tags fade out and the row springs back closed.

Type: Web motion
Framework: GSAP
Trigger: hover
Duration: 0.2–0.75s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: physics
Easing: elastic
Complexity: 3/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, matter-js

Hover rows that spring open on elastic.out(1,0.5) over 0.75s (collapse 0.5s, elastic.out(1,0.75)) while a 0.075s-staggered image stack slides through; 0.2s later Matter.js drops 5 chamfered pill tags per row under doubled gravity (y:2) with restitution 0.15, friction 0.6, density 0.002, onto a static floor 50px (25px under 1000px) above the row bottom, DOM-transformed each frame by a per-row rAF loop at a fixed 1000/60 timestep

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev25,077 chars

# Griflan Hover Effect — Elastic Service Rows with Falling Physics Tags

## Goal
Build a dark, full-viewport list of **three stacked "service" rows**, each a si…

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.