Анимация при скролле. Как создавать такие анимации?

let elements = document.querySelectorAll('.animated-by-scroll'); 
 
addEventListener('scroll', () => { 
  document.body.style.setProperty('--scroll', window.scrollY); 
})

body { 
  height: 4000px; 
  --scroll: 0; 
  overflow-x:hidden; 
} 
 
.rect { 
  position: absolute; 
  width: 50px; 
  height: 50px; 
} 
 
.rect1 { 
  background-color: hsl(calc(var(--scroll) * 0.1), 55%, 55%); 
  transform: translate(calc(50vw - 50%), calc(80vh - 50%))  
              rotate(calc(var(--scroll) * 0.5deg)) 
              scale(calc(calc(var(--scroll) * 0.01) + 1)); 
} 
 
.rect2 { 
  background-color: hsl(calc(var(--scroll) * 0.4), 55%, 55%); 
  transform: translate(calc(0.1vw * var(--scroll)), calc(80vh - 50%)); 
} 
 
.rect3 { 
 background-color: hsl(calc(var(--scroll)), 55%, 55%); 
  transform: translate(calc(90vw - calc(0.1vw * var(--scroll))), calc(100vh - 50%)); 
}

<div class="rect rect1"></div> 
<div class="rect rect2"></div> 
<div class="rect rect3"></div>