Skip to content

feat(web): use CSS linear() for spring animations#14

Merged
janicduplessis merged 1 commit intomainfrom
@janic/web-spring-linear-easing
Mar 25, 2026
Merged

feat(web): use CSS linear() for spring animations#14
janicduplessis merged 1 commit intomainfrom
@janic/web-spring-linear-easing

Conversation

@janicduplessis
Copy link
Collaborator

Summary

  • Replace hardcoded cubic-bezier(0.25, 0.46, 0.45, 0.94) spring approximation with real spring physics simulation
  • Generate CSS linear() easing points from a damped harmonic oscillator (same physics as iOS/Android)
  • Spring duration now derived from simulation settling time (incorporates stiffness, which was previously ignored)
  • Lazy linear() feature detection with automatic cubic-bezier fallback for unsupported browsers
  • Cache generated linear() strings by spring params to avoid recomputation

How it works

  1. Simulate spring at 120Hz: a = (-stiffness * (x - 1) - damping * v) / mass
  2. Downsample to 60fps, collect position samples
  3. Format as linear(0, 0.15, 0.82, 1.12, 1.05, 0.98, 1.0)
  4. Browser interpolates linearly between points → smooth spring curve

Test plan

  • yarn example web — open per-property demo with spring transition
  • Inspect element in DevTools — verify linear(...) in CSS transition
  • Spring should visually bounce/oscillate (not just ease-in-out)
  • Compare with native iOS/Android behavior

Replace the hardcoded cubic-bezier spring approximation with a real
spring physics simulation that generates CSS linear() easing points.
This matches native iOS/Android spring behavior much more closely.

- Add damped spring simulator (120Hz, downsampled to 60fps output)
- Cache generated linear() strings by spring params
- Lazy feature detection with cubic-bezier fallback
- Duration now derived from simulation settling time (uses stiffness)
@janicduplessis janicduplessis merged commit 008ff53 into main Mar 25, 2026
4 checks passed
@janicduplessis janicduplessis deleted the @janic/web-spring-linear-easing branch March 25, 2026 05:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant