Interactive

Project Overview Modal

by Vanguardia · motionprompts.dev

A project index where clicking any list item plays a paused GSAP timeline that slides a white detail overlay up from off-screen (bottom -1200px to 0) while un-rotating it from a 20deg tilt to flat with a power2.out ease; clicking Close or anywhere outside reverses the same timeline, and the overlay content (name, category, copy, link, image) is swapped in from a data array on open.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 0.2–0.5s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power2
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, phosphor-icons

click-triggered overlay slides up from bottom:-1200px to 0 while un-rotating from a CSS-set 20deg about 'bottom center', 0.5s power2.out; close button and any outside click reverse the same paused timeline

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,644 chars

# Project Overview Modal — Click-to-Reveal Sliding Detail Overlay

## Goal
Build a full-screen **project index**: a numbered list of projects sits at the bottom…

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.