I’ve been experimenting with CSS Scroll-driven Animations ,
I wanted to recreate this animation –> Parallax carousel demo.

I tried to do so in this codepen: Codepen view progress timeline.
As you can see in this codepen I try to animate the object-position using the View Progress Timeline

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
 
  animation: adjust-image linear both;
  animation-timeline: view(block);
  transform: scale(1.5);
}

@keyframes adjust-image {
  from {
    object-position: 50% 100%;
  }
  to {
    object-position: 50% 0;
  }
}

When using the code above the animation does not work as expected.

However when I use animation-timeline: scroll(root block); the animation does work!
You can see so in this codepen: Codepen Scroll Progress Timeline

I don’t understand why using the ‘View Progress Timeline’ does not work in this use-case.
Can someone explain to me why?