Preloader

Zoom-Out Mark Preloader

by Vanguardia · motionprompts.dev

A preloader with no veil: the blank white screen IS the interior of the brand's plus-sign mark, blown up until its crossing covers the viewport. A counter ticks 0 to 100 in ink over the white, then the mark zooms out on a logarithmic scale — so the recede reads at a constant rate instead of stalling — and the hero photograph is discovered around it rather than uncovered. The mark lands pixel-exact on the hero's own mark (both are the same two-bar cross, and the landing point and final scale are measured from it, not hard-coded), the two words fly in from opposite edges, and only once they have settled does the mark turn 360 degrees on its axis.

Type: Web motion
Framework: GSAP
Trigger: load
Duration: 0.3–1.9s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power2
Complexity: 3/5
Pinned: no
Reduced motion: handled
Libraries: gsap

One paused-free gsap.timeline() fired on module evaluation, in four strictly sequential phases with no overlap between them beyond the two stated. A 1.8s power1.inOut tween counts an object from 0 to 100 and writes the rounded value into a text node while nothing moves on screen. After +=0.12 the counter fades out over 0.35s (power2.in) and, at the same instant, a second 1.9s power1.inOut tween drives a normalized 0-to-1 progress whose onUpdate writes scale = final * (start/final)^(1-p) — the scale is interpolated in LOG space, not linearly, so the recede reads at a constant rate; start is recomputed from the live viewport diagonal every frame and final is measured from the destination element, so neither end of the recede is a constant. On completion a callback swaps the preloader mark for the hero's, and at that same position the nav fades in over 0.6s while two words tween xPercent ±140 to 0 with opacity over 1.05s power4.out, stagger 0.07. Only after those finish does a 1s power2.inOut rotate the mark 360 degrees, with the standfirst and link fading up at <0.2. Total ≈5.9s. No scroll listener, no rAF loop of its own, no ScrollTrigger. Under prefers-reduced-motion the timeline never runs and document.getAnimations() stays at 0.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev27,863 chars

# Zoom-Out Mark Preloader

## Goal

Build a full-viewport hero page for a fictional coastal smokehouse whose loading screen is not a
loading screen. The page op…

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.