Variable Font Scroll

font-variation-settings is an animatable CSS property. That means @keyframes can target it, and once a property is in a keyframe, animation-timeline can drive it from scroll position. No JavaScript, no font loading tricks, no canvas.

The pattern: a tall outer wrapper creates scroll space, a sticky inner element pins to the viewport, and a view-timeline-name on the outer wrapper drives everything inside. The page scroll is the only scroll that matters.

Scroll progress

As you scroll through the section, weight and tracking animate together: heavier type naturally needs tighter tracking.

.outer {
  height: 300vh;
  view-timeline-name: --section;
  view-timeline-axis: block;
}

.sticky {
  position: sticky;
  top: 0;
}

.heading {
  font-variation-settings: 'wght' 300;
  animation: weight linear both;
  animation-timeline: --section;
  animation-range: contain 0% contain 100%;
}

@keyframes weight {
  from {
    font-variation-settings: 'wght' 300;
    letter-spacing:  0.06em;
  }
  to {
    font-variation-settings: 'wght' 700;
    letter-spacing: -0.03em;
  }
}

animation-range: contain 0% contain 100% runs the animation from the moment the outer section covers the full viewport to the moment it stops, locking the sticky element in place for exactly that duration.

Weight lens

Each word peaks at bold as you scroll through its slice of the range. The keyframe pulses light → heavy → light, and animation-range staggers the peak per item. The result: weight follows wherever you’re looking.

.outer {
  height: 500vh;
  view-timeline-name: --section;
}

.item {
  animation: lens linear both;
  animation-timeline: --section;
}

/* Stagger the peak per item */
.item:nth-child(1) { animation-range: contain  0% contain 16%; }
.item:nth-child(2) { animation-range: contain 13% contain 29%; }
/* … */

@keyframes lens {
  0%, 100% { font-variation-settings: 'wght' 300; }
  50%       { font-variation-settings: 'wght' 700; }
}

The 3% overlap between adjacent items means two words are partially animated at the same time during the transition, which feels smoother than a hard cutoff.

Browser support

Both demos use animation-timeline. That requires Safari 18 (iOS 18, September 2024). On older iOS the text renders at the light weight start state and stays there. font-variation-settings itself has been in Safari since version 11, so the type still loads and displays correctly.