Alignment
Three misaligned segmented bars rotate and slide laterally until their markings match perfectly on a central axis.
CSS
Workstream
15 animationsAllocation
A horizontal bar splits into three unequal segments that slide smoothly to adjust their relative widths.
CSSBacklog
A stack of rectangular cards slide down one by one into active horizontal tracks to represent resource allocation.
CSSBlocker
A pulse traveling along a linear track hits a vertical barrier, rebounds, and waits until the barrier recedes.
CSSBottleneck
A broad flow of multiple lines constricts into a narrow channel where the lines slow down before expanding again.
CSSBurnup
An angled line graph rises incrementally toward a dotted target line while its fill area expands from the bottom.
CSSCritical Path
A network of connected nodes highlights a main path as a pulse of light traces the optimal sequence of dependencies.
CSSGantt
Three horizontal timeline tracks fill from left to right at staggered speeds to show parallel project progress.
CSSGate
A gate-like vertical line sweeps across three horizontal progress bars, pausing at each milestone until it fills completely.
CSSMerge
Three converging paths flow into a single central node that pulses once as all inputs successfully align.
CSSMilestone
A horizontal line runs through three diamond-shaped milestones that illuminate sequentially as a progress indicator passes through them.
CSSSplit
A single path divides into three branching lines that flow outward in parallel to depict workstream division.
CSSStage
A series of chevron-shaped blocks light up one by one in a continuous forward-moving wave.
CSSSwimlane
Two parallel lanes show block segments shifting and docking in alignment to represent cross-team handoffs.
CSSVelocity
A horizontal bar chart's blocks expand and contract rhythmically to visualize changing team output over time.
CSS