Animated Timeline Steps
Milestones on a vertical accent line that draws down, each node and label landing as the line reaches it, the current step lit.
What Is the Timeline Steps Card?
A vertical timeline that draws itself downward, with two to six milestones along it. Completed steps show a check, the current step is lit with a halo, and later steps sit hollow, so the viewer can see at a glance not just the sequence but where you are in it. Each milestone carries a title and a line of detail. Because the line draws top to bottom, it mirrors the direction people scroll and the direction a vertical video reads, which is why it feels natural in a nine by sixteen frame in a way a horizontal timeline never does. Use it for roadmaps, launch plans, how-I-got-here stories and any process with a current position.
How It Works
The card settles, then the accent line draws downward from the first milestone at a pace you control. Each node pops into place at the exact frame the line reaches it, with its title and detail settling in a few frames behind, so the reveal follows the line rather than running ahead of it. The current step's halo fades in once its node lands, which marks the position after the sequence has established itself.
Best For
- -Product roadmaps and launch plans
- -How I got here and origin stories
- -Step-by-step processes with a current stage
- -Course, programme or onboarding outlines
- -Any sequence where the now matters
Best Platforms for Timeline Steps Card
Instagram Reels
Journey and progress Reels tell a sequence with a voiceover. A line drawing downward sets the pace of the story and keeps every earlier milestone visible while you talk about the next one.
Roadmap and career posts are usually bullet lists. A drawn timeline with a lit current step makes the position explicit, which is the part a bullet list always leaves ambiguous.
Marking where you are, not just what happened
The difference between a timeline and a list is the current position, and this card makes that a first-class setting. Steps before the current one show a check and a filled node, the current step is lit with a halo, and later steps are hollow outlines. That means the same timeline can be re-rendered as a project moves: change which step is current and the visual updates without touching the content. It also means the card answers the question a viewer has after seeing any roadmap, which is what is happening now. Keep details to one short line each; the timeline is a spine for your narration, not a document, and long detail lines push milestones apart until the last one falls out of frame.
Timeline, points list or step rings: choosing the sequence element
Three elements in this family show ordered items and they differ in what they emphasise. The timeline draws a continuous line and marks a current position, which suits anything with dates or stages where progress matters. The points list reveals numbered points one at a time with the newest lit, which suits three reasons why and other spoken lists where the order is rhetorical rather than chronological. Step rings are a row of numbered badges whose rings sweep closed, designed to sit over a talking head as a counter rather than to carry text. If your sequence has dates, use the timeline; if it has arguments, use the points list; if it just needs a counter, use the rings.
Frequently Asked Questions
Everything you need to know before you start.
Can't find what you're looking for? Contact us