<div class="random-parent">
  <div class="scroller">
    <span></span>
  </div>

  <div class="changer">
    <svg viewBox="0 0 576 512" width="100" title="star">
      <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" />
    </svg>
  </div>
</div>

.random-parent {
  timeline-scope: --my-timeline;
}

.scroller {
  padding: 2rem;
  height: 100px;
  border: 10px solid black;
  overflow: auto;
  scroll-timeline: --my-timeline block;
  margin-block-end: 1rem;

  > span {
    display: block;
    height: 2000px;
  }
}

.changer > svg {
  display: block;
  position: relative;
  animation: spinner linear both;
  animation-timeline: --my-timeline;
}

@keyframes spinner {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

body {
  margin: 0;
  padding: 2rem;
}
@supports not (scroll-timeline: --x) {
  .changer::after {
    font-size: 20px;
    color: red;
    content: "No support.";
  }
}