Along a path
A paper plane flies along a curve and turns with it.
CSS offset-path: path('…') puts an element on a path, offset-rotate: auto turns it to the path's direction, and an offsetDistance track moves it from 0% to 100% of the way.
The dashed route is the same path, drawn in an SVG the size of the stage.
<div id="stage" data-composition-id="flight" data-start="0" data-duration="4" data-width="1280" data-height="720" data-fps="30">
<div class="layer" data-component="flight" data-start="0" data-duration="4">
<svg class="layer" viewBox="0 0 1280 720" width="1280" height="720">
<path class="route" d="M 160 560 C 400 80 880 80 1120 560"></path>
</svg>
<div class="plane" data-bind-style="plane"></div>
</div>
</div>const { scene } = wildflower.kinetic;
scene('flight', {
keyframes: {
plane: { offsetDistance: { at: [0.3, 3.5], to: [0, 100], unit: '%', ease: 'power1.inOut' } },
},
});html, body { margin: 0; background: #0a0b10; }
#stage { position: relative; overflow: hidden; background: #14122a; }
.layer { position: absolute; inset: 0; }
.route { fill: none; stroke: #4a4766; stroke-width: 3; stroke-dasharray: 8 10; }
.plane { position: absolute; left: 0; top: 0; width: 40px; height: 20px; background: #f5c542;
offset-path: path('M 160 560 C 400 80 880 80 1120 560'); offset-rotate: auto; }
[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
Along a path
The path's coordinates start at the element's own position, so the plane sits at left: 0; top: 0 in a layer that shares the drawn path's coordinates, here the stage's.
The plane's center is the point on the path.
The track needs unit: '%', since the browser ignores a bare number there, and development builds warn about a track without one (KN-122).