Technology1 min read

Lemmings CSS Animation

By · Published by Everything Blog

In short

The mechanism leverages reflowing columns of text that shift when a browser window changes size, turning individual lines into walkable platforms. Vertical spacing between lines remains shorter than the walkers themselves, ensuring that only actual elements like buttons, borders, and fields hinder their travel. Meanwhile, characters can slip off the ends of short lines to land on whatever content sits directly below. A single long floor sits near the page bottom to safely catch any figures that drop all the way down.

Key points

  • Typography can function as structural ground within responsive web animation designs.: Typography can function as structural ground within responsive web animation designs.
  • Characters fall from shortened text lines and navigate around layout obstacles rather tha…: Characters fall from shortened text lines and navigate around layout obstacles rather than getting trapped between sentences.
  • A foundational lower floor prevents figures from disappearing entirely when they drop thr…: A foundational lower floor prevents figures from disappearing entirely when they drop through text columns.

Sources checked by our analysis pipeline: 1

Columns of text reflow a lot when the window changes size, so this is a good place to try a resize launch. Each line of text is its own floor. Walkers can drop from line to line, fall off the end of a short line, and land on whatever is below.

Lines sit closer together than a walker is tall, so text never blocks them. Only borders, boxes, buttons, images and fields do. That keeps walkers from getting stuck between two lines of a paragraph.

Near the bottom of the page there is one long floor to catch anything that falls all the way down.

Technology