2

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;
   }
}
2
  • Have you checked Browser compatibility of view()?
    – Akshay
    Commented Mar 3 at 13:16
  • Yes, it's all supposed to work. I mean, it still works in my previous site as well.
    – Hazrd
    Commented Mar 3 at 13:17

2 Answers 2

6

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!

2
  • 2
    As an addition: It has been common practice in the past to add an overflow-x: hidden; on the <body> and <html> elements to prevent horizontal scrolling when elements would accidentally peek outside of their borders. This now blocks animation-timeline: view(). And yes... even vertical scrolling when only overflow-x is set to hidden.
    – Rick
    Commented Mar 22 at 8:10
  • 2
    i use overflow: clip instead when i need to use overflow:hidden while using timeline: view(). Commented May 8 at 22:46
1

I have seen some problems with the below code

overflow: hidden;

Instead, you can try the below

overflow: clip; 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.