CODEWITHSUNDEEP
csscss-animations
Hazrd
Hazrd

Reputation: 216

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;
   }
}

Upvotes: 2

Views: 4326

Answers (3)

Maatthieu Maat
Maatthieu Maat

Reputation: 123

You can still want to use:

overflow: hidden;

but, in addition, you will have to specify that the scrolling context is the document, inside the scroll property. For ex:

animation-timeline: scroll(y root);

Upvotes: 0

Hazrd
Hazrd

Reputation: 216

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

The issue was an 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. Instead of overflow: hidden, overflow: clip works just fine. contain: paint also does a good job.

Kevin Powell made an awesome video about this: https://www.youtube.com/watch?v=72pUm4tQesw

I hope this helps other people facing the same issue!

Upvotes: 8

Federico Di Nuzzo
Federico Di Nuzzo

Reputation: 1

I have seen some problems with the below code

overflow: hidden;

Instead, you can try the below

overflow: clip;

Upvotes: 0

Related Questions