title: CSS animation corresponding to page scroll position
body: <p>How can an animation be made to correspond with page scroll position, so that when the user scrolls past it the animation goes to position A, and when the user's page scroll position is over it, it goes to position B?</p>
  
  <p>Here is a mock-up of what I would like to make:</p>
  
  <p><img src="https://i.stack.imgur.com/4259v.gif" width="192"></p>
  
  <p>(The pivot point of the 3 pages is represented by the blue dot below them.)</p>
  
  <p>I have found various examples of animations that are triggered once by page scrolling (<a href="https://css-tricks.com/aos-css-driven-scroll-animation-library/" rel="nofollow noreferrer">such as AOS</a> or <a href="https://terwanerik.github.io/ScrollTrigger/" rel="nofollow noreferrer">ScrollTrigger</a>), or can be re-triggered multiple times, but I haven't found any examples where the animation progress is connected to the page scroll position.</p>
  
  <p>Maybe it can be done by modifying some existing example, but if not I think I will need to come up with something custom using <a href="https://www.w3schools.com/cssref/css3_pr_animation.asp" rel="nofollow noreferrer">the CSS animation property</a> and connect it to the page scroll position somehow.</p>
  
  <p>Any ideas how this can be achieved? Thanks.</p>