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