Before and after
- Size
- 1920×1080
- Frame rate
- 30 fps
- Length
- 5s
A hinge down the middle, two figures either side, and a delta badge that does its own arithmetic.
Make your own before and after animation
Puts two numbers side by side — what it was, what it is — and holds long enough for the gap to land. Say a sentence like the one below and your agent writes you a different one — free, in your browser.
Say this to your agent
>Two numbers side by side: what it was, what it is now.
Or ask for a different one
Not settings — each one builds something else.
>Before and after, but the old number crosses itself out as the new one arrives.
>Three stages instead of two: where we started, halfway, now.
>Compare two numbers and add the percentage change between them.
What it worked out on its own
The frame is split by a line that wipes down before either number exists. The eye is given a hinge before it is given two values, which is what makes it a comparison rather than two charts.
The before is deliberately dull and the after is the only thing still moving by the time the badge lands. Equal weight makes the viewer work out which one is the good news.
Each number carries a bar at its own share of the larger. Two figures a factor of thirteen apart look like two figures; two bars do not.
The delta is computed from the two props. A hand-typed percentage beside editable numbers is a lie waiting for the first person to change one.


