How to animate an element along an SVG path using only CSS and Scroll-driven Animations?

Note: This currently only works in Chrome Canary 115+ with experimental-web-platform-features enabled.

In general, the strategy is to use the offset-path style property with the url() CSS function to reference the path the element should follow. In this case specifically, you would set it to url(#my_path). And then in your @keyframes <name>, simply transition from offset-distance: 0%; to offset-distance: 100%;.

However, the method of attaching a scroll-driven timeline to your animation depends largely on the structure of your page and precisely where the path is located on the page. Namely, there are two cases.

Case 1: The path spans the entire scroll container

This is the simple case. We can associate a scroll timeline with the animation using animation-timeline: scroll();, which references the block axis of the nearest ancestor scroll container. And then we set the animation on the element using animation: <name> linear;.

Make sure to also set the initial position of the element to (0,0) of the offset parent via position: absolute and inset: 0. All together, the code should look something like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#car {
width: 25px;
height: 25px;
position: absolute;
inset: 0;
offset-path: url(#my_path);
animation: offsetDistance linear;
animation-timeline: scroll();
}
@keyframes offsetDistance {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}

<!-- language: lang-html -->

<img id="car" width="256" height="256" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFZaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Chle4QcAAAAJcEhZcwAACxMAAAsTAQCanBgAAAL6UExURUdwTLwoJQAEB8w9OuJBPuZWU9BCP7hPTOceHq4tKNktJdpsarwpJeRPSq8ICHEnJrAPC4cxL8lAPdBTULUbG6lCQs1FQbcpJ9hlYsAuK885NsIzMeM3Me07N4NQUr8hHq8yMNFHRMY8Obk4NcI3NMo1MrwpJ7spJrctK7QXEtdjX6MAAMo6OMhCPy4MDrxBP6osK8dAPOlAO9x5d8Q8OaYAALVXVrdLScZqaZBmZpAAAIwzM8xPTKw7Oa80NJ8nJ7wqJ78qKMY2NJcdG95LR0pLUMMrKbkzL8s5N6coJsQ6NkJDQzlMTGQAAOFPTGgAAB9QV510dOdSTjxaYs1YVdJkYv+apddqFdhlY9dhX9pqaBUUFdZjYdNWVNZaV9BEQdRYVdBGQ9VUUdNPS9pvbNx4dhsZGtJRTtxxb9ZfXdloZdI3M89QTcdOTNx0ctZdWjAtLttaWME7ON6AftlnZNpsaiUdHsxAPNlbWM8/PNQ9OgA3Os9KRtdXVNdQTSQkJdVbWCEWFzk5PM06N9NUUdNIRUlbYqBRUbJAPt57eSopK4o/PgAPEsYsKeJwbtA7OLg1M9pXVIosKy5ISwALDQAaHVBPUdJNStpRTshTUaI8Oqg3NrMzMahDQalSUtxfXAMGCHc5OsQzMAAsMNxLR9dEQeN3dbUjIdxjYAAUFk1FRU45OwAeIQEoK9NLR75VVLgtK20yM3ssLJIyMpk2Nd5pZq1CQa4SEJVKSRweH8o0MoI7Ot9lYTYzNa0wLbtDQH1LSqEuLEhNU9FUUURGSok2NQIxM0BAQ1tZXdVoZmdiZUxKSwAlKJI2NmIvLj85OisjJHZCRLMbGbYEAEtmbpkwLrQ7OYxMTZuFhScvMC8xNRxBQ9BfXTQbHCcUFgAWGFEnJ0BQUCoYGUc/QHZVW89NSjBUWAtGSXh7fIdDQl5sb5SYmISIiJdeXw0fIEoiIrxHRRYfIRM7QMdfXSw/QL8pJlFfX5hvb5MqKXh2dmlWVgBAQYFhYaBzc6yuSJ0AAADfdFJOUwD3/hQ5OTgCAQQg+g45Tf5v/vz4Gpos1vv89/ouMf79/fFu2q3s5anDkPsk1cr+YP3ILfu+PP3898yd9PmNdE7Kk8D7hPzukuXH+Pz8a4px/v5B/vn5kv////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////7////////////////////////////////////+//////////////6TEl4rAAAESUlEQVRIx2NgGAWjgHqAgxOHODsuwAmW5AABVA14bGHnQijj5OSEKAVq52AWE2NjY+MN4mVFAF5eXllZLr9+PmYRZh5OmCVQTUrKitOT6+qS0mfOzAWBDx/27+8AgW1z5879YSAlpeqho+Ok4ijApw3SBMT6vZdbk6enz5iRLNcWHPC8evGaHj09JqaeNWurV5/beHTL7KKl2dlVS5csWRLvpeHPCdTDqbxIOLYl6Wn7W7PD6+e1X794ceFGQUF+wbOzOq61B974tcrH2yxLWEiSUVoovXDJX0seBgbTz3kJCQmHNz57dWV9YVxFXFwckBvb0lJXt/Ttm9evpx2Z9nDVyYzSmJlFyy9Jx1vcsGJgEEg1bmkonLv49Im2eStiYmIiI2NAZH5CbM2fF29eHF91etrk9q0nS1Oi7uRu2C4/z1qEwX0Zd0JD4e4zTdOete+JKCmJKIkCgqyIyPxkuVc/T3U1HV/15UBESUREVlTUyZlzLs+xZ1ABaslPODe16/htkBagTEpGRkZKVERk0oFvp06nFRTsvbn6zoqYiAiQrizzbXYMJsu4G/IPv79ftrd6xx6gBFBHXmpqXkZURO2BhycKouvru7rerZ+fCXHw1tB2WwbDPomEipl3e9IurO1eERkJ1JKX2tnZmZeSVfFy8uPo6LS0srKV5vMb8jMzgdpWhOwQZdAFacl91BPdOLV7fmZmDEhLcXFxKlBL9+2CBdFATY092ybGJjQAQUKF8HWQFq1YoJaVaY1TjgLNiswqBdoC1VJdFg0CjQtmzchJB4Na4ZeiQIdpHY7LvXs/rXHB0cKGhnyIy1LzSiMm7l5ctjMNrOXg0vL4xJrpQC02QIeZ9Emk1+Y8WFNWNuVsYWxCXGYEOMhKSyKTFh4rqK/fuTMtrWdfFUjLuunJE2122DKoL+NOjk0/d+bChZVbJh5uiY3LjCkBBmZEZkPywk9Nt2521dd/TJsA1AKyJrlGYa4dg2Yn97rDdbuPFRSs2TIjvaWlJSEfGDLA2E9qvTj5yPGmvbcK1j7Y1V9eGZ+YKLRh+3YFe2CCKY7PmTH39+Pzi2fV5YDA4djYhNjDOU/Ln7RNOwTUdL56UnZzZWX5ouXbL4ETjOl643XJyTUXn0+uvtaa2NqaCALx8fGVldnXr1xpazt0aPJqyeZdizYsv7S8SAqcLDnFvyrW1CSWz+qeHV80++qkTfz8/JMmbdq8Zfa1CbPknpw60eZqsEiSkRGY+OPrsr9bMoOymPzl7P7myqqqyk1r7vdMYQKCe4+mrjmz+Fj16o2bgFlsQ29v767sqqr+RYyevpzgbKkkrirV3N9f1TyhCAgmTJijMGfOvn0HDx68uvns2UnOjG5qauIOGuqa8IwMKgiYuUDFBRsLEjAykpGRkeVy6efjEeHhgZdmkOKCA6oPf6EELM7ghRKIi7vsA6nlwCj68Bew7KOVzCigEAAAop3jpH2nqD8AAAAASUVORK5CYII=">
<svg width="175" height="1300" viewBox="0 0 175 1300" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="my_path" d="M 28 0 C -72 200 188 300 88 500 C -32 700 88 1100 148 1000 C 208 900 148 600 68 1000 C 28 1200 128 1300 128 1300"
stroke-width="4" stroke="#000" />
</svg>

<!-- end snippet -->

Case 2: The path is a portion of the scroll container

In this case, we must use a View Progress Timeline which requires a little more effort to setup correctly, and so it's easier to explain step-by-step.

1. Declare a scope on the nearest common ancestor of the element and the path. This enables the attachment of a view timeline to be deferred to a descendent, which will be the path element, and referenced by other decendents, which will be the image element.

#container {
  timeline-scope: --container;
}

2. Attach the path element to the view timeline with the same name, like so:

#my_path {
  view-timeline-name: --container;
}

3. Associate the named timeline with the element's animation.

#car {
  animation-timeline: --container; /* ... */
}

4. Determine your animation's timeline range. This also depends greatly on your page's structure and likely requires some manual testing. However, this tool is extremely helpful in understanding the behavior of various ranges. In my example, I choose the following:

#car {
  animation-timeline: --container; 
  animation-range: exit-crossing -5% entry-crossing 105%;
  /* ... */
}

5. Lastly, to prevent visual glitches at the end of the animation, change the animation-fill-mode to forwards.

#car {
  animation: <name> linear forwards;
  animation-timeline: --container; 
  animation-range: exit-crossing -5% entry-crossing 105%;
  /* ... */
}

Finally, putting everything together, we get the following animation:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#container {
position: relative;
timeline-scope: --container;
}
#my_path {
view-timeline-name: --container;
}
#car {
width: 25px;
height: 25px;
position: absolute;
inset: 0;
offset-path: url(#my_path);
animation: offsetDistance linear forwards;
animation-timeline: --container;
animation-range: exit-crossing -5% entry-crossing 105%;
}
@keyframes offsetDistance {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}

<!-- language: lang-html -->

<div style="height: 150px;"></div>
<div id="container">
<img id="car" width="256" height="256"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFZaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Chle4QcAAAAJcEhZcwAACxMAAAsTAQCanBgAAAL6UExURUdwTLwoJQAEB8w9OuJBPuZWU9BCP7hPTOceHq4tKNktJdpsarwpJeRPSq8ICHEnJrAPC4cxL8lAPdBTULUbG6lCQs1FQbcpJ9hlYsAuK885NsIzMeM3Me07N4NQUr8hHq8yMNFHRMY8Obk4NcI3NMo1MrwpJ7spJrctK7QXEtdjX6MAAMo6OMhCPy4MDrxBP6osK8dAPOlAO9x5d8Q8OaYAALVXVrdLScZqaZBmZpAAAIwzM8xPTKw7Oa80NJ8nJ7wqJ78qKMY2NJcdG95LR0pLUMMrKbkzL8s5N6coJsQ6NkJDQzlMTGQAAOFPTGgAAB9QV510dOdSTjxaYs1YVdJkYv+apddqFdhlY9dhX9pqaBUUFdZjYdNWVNZaV9BEQdRYVdBGQ9VUUdNPS9pvbNx4dhsZGtJRTtxxb9ZfXdloZdI3M89QTcdOTNx0ctZdWjAtLttaWME7ON6AftlnZNpsaiUdHsxAPNlbWM8/PNQ9OgA3Os9KRtdXVNdQTSQkJdVbWCEWFzk5PM06N9NUUdNIRUlbYqBRUbJAPt57eSopK4o/PgAPEsYsKeJwbtA7OLg1M9pXVIosKy5ISwALDQAaHVBPUdJNStpRTshTUaI8Oqg3NrMzMahDQalSUtxfXAMGCHc5OsQzMAAsMNxLR9dEQeN3dbUjIdxjYAAUFk1FRU45OwAeIQEoK9NLR75VVLgtK20yM3ssLJIyMpk2Nd5pZq1CQa4SEJVKSRweH8o0MoI7Ot9lYTYzNa0wLbtDQH1LSqEuLEhNU9FUUURGSok2NQIxM0BAQ1tZXdVoZmdiZUxKSwAlKJI2NmIvLj85OisjJHZCRLMbGbYEAEtmbpkwLrQ7OYxMTZuFhScvMC8xNRxBQ9BfXTQbHCcUFgAWGFEnJ0BQUCoYGUc/QHZVW89NSjBUWAtGSXh7fIdDQl5sb5SYmISIiJdeXw0fIEoiIrxHRRYfIRM7QMdfXSw/QL8pJlFfX5hvb5MqKXh2dmlWVgBAQYFhYaBzc6yuSJ0AAADfdFJOUwD3/hQ5OTgCAQQg+g45Tf5v/vz4Gpos1vv89/ouMf79/fFu2q3s5anDkPsk1cr+YP3ILfu+PP3898yd9PmNdE7Kk8D7hPzukuXH+Pz8a4px/v5B/vn5kv////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////7////////////////////////////////////+//////////////6TEl4rAAAESUlEQVRIx2NgGAWjgHqAgxOHODsuwAmW5AABVA14bGHnQijj5OSEKAVq52AWE2NjY+MN4mVFAF5eXllZLr9+PmYRZh5OmCVQTUrKitOT6+qS0mfOzAWBDx/27+8AgW1z5879YSAlpeqho+Ok4ijApw3SBMT6vZdbk6enz5iRLNcWHPC8evGaHj09JqaeNWurV5/beHTL7KKl2dlVS5csWRLvpeHPCdTDqbxIOLYl6Wn7W7PD6+e1X794ceFGQUF+wbOzOq61B974tcrH2yxLWEiSUVoovXDJX0seBgbTz3kJCQmHNz57dWV9YVxFXFwckBvb0lJXt/Ttm9evpx2Z9nDVyYzSmJlFyy9Jx1vcsGJgEEg1bmkonLv49Im2eStiYmIiI2NAZH5CbM2fF29eHF91etrk9q0nS1Oi7uRu2C4/z1qEwX0Zd0JD4e4zTdOete+JKCmJKIkCgqyIyPxkuVc/T3U1HV/15UBESUREVlTUyZlzLs+xZ1ABaslPODe16/htkBagTEpGRkZKVERk0oFvp06nFRTsvbn6zoqYiAiQrizzbXYMJsu4G/IPv79ftrd6xx6gBFBHXmpqXkZURO2BhycKouvru7rerZ+fCXHw1tB2WwbDPomEipl3e9IurO1eERkJ1JKX2tnZmZeSVfFy8uPo6LS0srKV5vMb8jMzgdpWhOwQZdAFacl91BPdOLV7fmZmDEhLcXFxKlBL9+2CBdFATY092ybGJjQAQUKF8HWQFq1YoJaVaY1TjgLNiswqBdoC1VJdFg0CjQtmzchJB4Na4ZeiQIdpHY7LvXs/rXHB0cKGhnyIy1LzSiMm7l5ctjMNrOXg0vL4xJrpQC02QIeZ9Emk1+Y8WFNWNuVsYWxCXGYEOMhKSyKTFh4rqK/fuTMtrWdfFUjLuunJE2122DKoL+NOjk0/d+bChZVbJh5uiY3LjCkBBmZEZkPywk9Nt2521dd/TJsA1AKyJrlGYa4dg2Yn97rDdbuPFRSs2TIjvaWlJSEfGDLA2E9qvTj5yPGmvbcK1j7Y1V9eGZ+YKLRh+3YFe2CCKY7PmTH39+Pzi2fV5YDA4djYhNjDOU/Ln7RNOwTUdL56UnZzZWX5ouXbL4ETjOl643XJyTUXn0+uvtaa2NqaCALx8fGVldnXr1xpazt0aPJqyeZdizYsv7S8SAqcLDnFvyrW1CSWz+qeHV80++qkTfz8/JMmbdq8Zfa1CbPknpw60eZqsEiSkRGY+OPrsr9bMoOymPzl7P7myqqqyk1r7vdMYQKCe4+mrjmz+Fj16o2bgFlsQ29v767sqqr+RYyevpzgbKkkrirV3N9f1TyhCAgmTJijMGfOvn0HDx68uvns2UnOjG5qauIOGuqa8IwMKgiYuUDFBRsLEjAykpGRkeVy6efjEeHhgZdmkOKCA6oPf6EELM7ghRKIi7vsA6nlwCj68Bew7KOVzCigEAAAop3jpH2nqD8AAAAASUVORK5CYII=">
<svg width="175" height="1300" preserveAspectRatio="none" viewBox="0 0 175 1300" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path id="my_path" d="M 28 0 C -72 200 188 300 88 500 C -32 700 88 1100 148 1000 C 208 900 148 600 68 1000 C 28 1200 128 1300 128 1300"
stroke-width="4" stroke="#000" />
</svg>
</div>
<div style="height: 150px;"></div>

<!-- end snippet -->