Stop CSS fading when scrolling?
I added a fade effect to the bottom of a scrollable div with text to emphasize scrolling, but the idea is that when you reach the bottom, aka, there's no more text, I want that fade to cease. I tried the animation-timeline property but I'm not getting any results, any ideas?
I used the following code
body {
background: black;
color: white;
}
div {
width: 200px;
height: 250px;
overflow-y: auto;
animation: remove-fade linear;
animation-timeline: scroll();
animation-duration: 1ms; //this one is for a firefox bug
mask: linear-gradient(to bottom, rgba(0,0,0, 1) 70%, rgba(0,0,0, 0) 100%);
}
@keyframes remove-fade {
to { mask: none }
}
You can use this as HTML in codepen for testing but it's just a div with lorem ipsum
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros nulla, elementum egestas ipsum nec, porttitor gravida velit. Fusce placerat purus libero, et dignissim ligula tempor vitae. Cras mi mauris, viverra nec ipsum ac, rhoncus semper lacus. Pellentesque posuere eleifend sollicitudin. Maecenas ut enim id eros ultrices vestibulum placerat tincidunt nisl. Nulla interdum dignissim lectus, vitae convallis arcu pellentesque nec. Nunc in nulla orci. Suspendisse elit est, congue nec aliquet eget, iaculis non erat. Aliquam erat volutpat. Integer egestas varius rhoncus. Fusce tristique ante posuere dolor convallis pretium. Quisque eget finibus sem. Duis aliquam euismod metus nec porta. Vestibulum malesuada, neque et commodo ultrices, felis dui efficitur dui, vel luctus ipsum ex ac nibh.</div>
Here's how it looks like...15 Replies
Why not use javascript?
the rest of the site is JSless, using it for that alone seems overkill, I want to keep it simple with native CSS
Instead of scroll(), use view() and adjust your values to (I believe it's) "cover". You can also manually add offsets to make it start/finish when you want
what property should be set to cover exactly?
animation-range: entry;
Which tells browser to run the entire animation while the element is entering the viewport and finish once it’s block-end has cleared the bottom of the viewport;
Values accepted for animation-range are entry, exit, entry-crossing, exit-crossing, cover, and contain
https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=cover&range-start-percentage=0&range-end-name=cover&range-end-percentage=100&view-timeline-axis=block&view-timeline-inset=0&subject-size=smaller&subject-animation=reveal&interactivity=clicktodrag&show-areas=yes&show-fromto=yes&show-labels=yes
This can help you figure out the values you want for the behaviour your looking for
Animation-duration: auto , what is the Firefox bug that you’re using 1s for ?that makes view() work as scroll() which is cool to know, but the animation is still not reproducible, maybe the animation keyframe is invalid, I tried to change it to
@keyframes remove-fade {
to { opacity: 0; }
}
but it's not working eitherYes view is like scroll()
I tried to find the source for that but I couldn't find it, but you can see here https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll on the last block of code the following comment
animation-duration: 1ms; /* Firefox requires this to apply the animation */
and it's 100% true, if you take that out (on a working animation, not mine atm) nothing happens on Firefox (also I have to add that on Firefox animation-timeline is experimental so I changed a flag for it to work)MDN Web Docs
scroll() - CSS: Cascading Style Sheets | MDN
The scroll() CSS function can be used with animation-timeline to indicate a scrollable element (scroller) and scrollbar axis that will provide an anonymous scroll progress timeline for animating the current element. The scroll progress timeline is progressed through by scrolling the scroller between top and bottom (or left and right). The positi...
Can you put all your code into a jsfiddle or codepen
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
It may be hard to see because you have it on one long element which takes up the whole viewport cells, trying to make it animate in or out when it’s set to start the animation as soon as it hits the view port, well, it’s already all the way in. If I were you, I would try breaking it up, put a few divs in your mark up give one a class and put your animation on the one with the class somewhere in the middle, where it isn’t automatically in view when the page loads
Also these scroll driven animation support isn’t 100% yet so could be that.
Animation-timeline isn’t supported at all in Firefox or safari
I also don’t think that mask is an animatable
Property
it is behind a flag or whatever is called in Firefox
that's a real possibility
but with opacity: 0; I couldn't make it work either, on Chrome
Try breaking up the content as it’s all one element and is in view as soon as page pass. Put the animation on a div somewhere in the middle so that you have to scroll before it enters the viewport
Like background-image, mask is not. Mask-size and position are, just like bg image: I’ve been trying to just overwrite a bg image in a media query and it won’t , it just adds a new one on and underneath the first. These properties are tricky
Hmm time to watch a KP vid and figure out what’s missing
I was trying to avoid that much hassle but seems inevitable haha
Animation: name linear forwards;
Is what I was missing , I have it changing color but it’s like the animation goes before I’ve scrolled to it. Trying to get it from red to blue and as soon as it’s in the viewport it’s blue . Hmm
Just missing one property I bet