← All motion patterns
Letter explode
SubscriptionLetters thrown to random positions and rotations, then flying home 35ms apart.
Each character is wrapped in its own inline-block span and thrown to a random offset and rotation with the transition switched off, so the scatter is instant and unseen; a forced reflow commits that state before the transition is restored, which is the only way to make a CSS transition animate out of a position it was never seen in. The letters then return on a 900ms curve staggered 35ms apart, so the word assembles left to right out of chaos. The cycle repeats every 4.5 seconds. Under reduced motion the word is simply present.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
See plans