A plane that faces where it flies
1 min read
- CSS
- motion
The little plane that loops over the map isn't driven by JavaScript. It rides a CSS Motion Path: you define an `offset-path`, animate `offset-distance` from 0% to 100%, and the browser walks the sprite along the curve for you.
The detail that sells it is `offset-rotate: auto`. With that one declaration the element rotates to match the tangent of the path, so the plane's nose always points the direction it's travelling — banking through the turns for free.
Because it's all declarative, it runs on the compositor. No requestAnimationFrame, no layout thrash, and it pauses politely when the user prefers reduced motion. The whole effect is a dozen lines of CSS doing what would otherwise be a per-frame trig problem.