Footer

Image Explosion Scroll Animation

by Vanguardia · motionprompts.dev

As the footer scrolls into view, fifteen images burst upward from the bottom of the footer and arc back down under simulated gravity. Pure vanilla JS: a requestAnimationFrame loop drives a custom particle physics system (velocity, gravity, friction, rotation) with no GSAP, fired by a scroll listener that checks the footer's bounding rect against the viewport.

Type: Web motion
Framework: Vanilla JS
Trigger: scroll

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: physics
Complexity: 2/5
Pinned: no
Reduced motion: not handled

hand-rolled per-frame gravity sim: 15 <img> particles launched from the footer bottom with vx = (rand-0.5)*20, vy = -15 - rand*10, rotationSpeed = (rand-0.5)*10 deg/frame; each frame vy += 0.25 (gravity) then vx/vy/rotationSpeed *= 0.99 (friction), integrated into an inline translate()+rotate() transform; loop ends when every particle's y exceeds explosionContainer.offsetHeight/2

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev15,370 chars

# Image Explosion Scroll Animation

## Goal

Build a 4-section scroll page whose payoff is the footer: when the footer scrolls at least half-way into view, **15…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.