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...
No description
15 Replies
vince
vince11mo ago
Why not use javascript?
αgυѕ
αgυѕ11mo ago
the rest of the site is JSless, using it for that alone seems overkill, I want to keep it simple with native CSS
clevermissfox
clevermissfox11mo ago
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
αgυѕ
αgυѕ11mo ago
what property should be set to cover exactly?
clevermissfox
clevermissfox11mo ago
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 ?
αgυѕ
αgυѕ11mo ago
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 either
clevermissfox
clevermissfox11mo ago
Yes view is like scroll()
αgυѕ
αgυѕ11mo ago
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...
clevermissfox
clevermissfox11mo ago
Can you put all your code into a jsfiddle or codepen
αgυѕ
αgυѕ11mo ago
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
clevermissfox
clevermissfox11mo ago
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
αgυѕ
αgυѕ11mo ago
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
clevermissfox
clevermissfox11mo ago
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
αgυѕ
αgυѕ11mo ago
I was trying to avoid that much hassle but seems inevitable haha
clevermissfox
clevermissfox11mo ago
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
Want results from more Discord servers?
Add your server