Search code examples
csscss-animations

Why isn't my CSS animation-timeline: view() working?

I'm trying to get my element to animate with animation-timeline: view(); but, It just doesnt seem to be working. At all...

I got it to work before in a site of mine for a parallax effect here and now it isn't working anymore no matter what i do!

Here's the code:

<div class="parallax">
  <img src="https://unsplash.com/photos/grayscale-water-drop-Y6-GL40aPPs" alt="" />
</div>

.parallax {
   overflow: clip;
   height: 20vh;

   position: relative;
   z-index: 1;
}

.parallax > img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   animation: parallaxY linear;
   animation-timeline: view();
   animation-range: entry cover;
}

@keyframes parallaxY {
   from {
      translate: 0 -100px;
   }
   to {
      translate: 0 100px;
   }
}
Solution

  • Right after I post a question, I crack my own problem. I'd already been fiddling around with this for two days!

    Turns out the issue was a overflow: hidden property that I set on the parent of the .parallax element.

    I completely forgot that css animations (not transitions) dont work if the target element's parent has its overflow set to hidden.

    I hope this helps other people facing the same issue!