Metrics are generally displayed as cold numeric dashboards. You can turn almost any point tracker (donations, habits) into a living digital organism that grows dynamically over time with CSS scaling.

Staggering Animation Elements

The trick to an organic feeling vine is using delayed transitions (transition-delay) based on height.

.leaf {
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The vine hits certain stages, displaying subsequent leaves! */
.stem[data-stage="1"] .leaf:nth-child(1) { transform: scale(1); delay: 0s; }
.stem[data-stage="2"] .leaf:nth-child(2) { transform: scale(1); delay: 0.2s; }

Check out the interactive milestone slider in the Live Demo which sequentially spawns cascading aesthetic vine leaves up the trellis!