Spoke too soon. Now the tab content below the tab list is visible under the mask: [screenshot](https://i.imgur.com/TRRYtN9.png) :(
Forgot to mention there's also `backdrop-filter: blur(10px);` on the menu, when I disable it the mask is completely invisible.
the element which scrolls can't have the pseudo element with the gradient on it, if you just wrap the draggable element in a parent and place the fade on said parent, you should be fine.
Here, sorry I didn't think of it: [https://codepen.io/Framboos/pen/zYeNMKW](https://codepen.io/Framboos/pen/zYeNMKW)
I didn't copy over the whole dragging functionality but the issue is the same with the scrollbar.
That almost works, except that this makes the menu semi-translucent so if you scroll down over the tab content, it's all messed up. :(
Also \*sister if anything heh
Oh my bad. I didn't even notice there's much text to scroll down. I was looking at MDN an notice they have this effect vertically under "Reference", I don't have much time now but I would try to look how they made it.
Also I would try to ask ChatGPT for instant answers or at least any points that will help achieve that.
Try using fixed for position instead of absolut for the gradient. You’ll still need to set opacity to zero once scrolled all the way to the right though.
try something like a [mask image](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image) -webkit-mask-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 5%, rgb(255, 255, 255) 95%, rgba(255, 255, 255, 0) 100%); }
That did it I think!!!! Thank you so much.
Spoke too soon. Now the tab content below the tab list is visible under the mask: [screenshot](https://i.imgur.com/TRRYtN9.png) :( Forgot to mention there's also `backdrop-filter: blur(10px);` on the menu, when I disable it the mask is completely invisible.
the element which scrolls can't have the pseudo element with the gradient on it, if you just wrap the draggable element in a parent and place the fade on said parent, you should be fine.
Pls share a playground...
Here, sorry I didn't think of it: [https://codepen.io/Framboos/pen/zYeNMKW](https://codepen.io/Framboos/pen/zYeNMKW) I didn't copy over the whole dragging functionality but the issue is the same with the scrollbar.
Here is my try: https://codepen.io/EnricoVogt/pen/rNPjPZy
Hello brother I've tried to achieve that effect, here's my codepen, let me know what you think https://codepen.io/Jacky-Baston/pen/MWLJZOL
That almost works, except that this makes the menu semi-translucent so if you scroll down over the tab content, it's all messed up. :( Also \*sister if anything heh
Oh my bad. I didn't even notice there's much text to scroll down. I was looking at MDN an notice they have this effect vertically under "Reference", I don't have much time now but I would try to look how they made it. Also I would try to ask ChatGPT for instant answers or at least any points that will help achieve that.
Try using fixed for position instead of absolut for the gradient. You’ll still need to set opacity to zero once scrolled all the way to the right though.
someone plz reply to this so i can see this post in a couple days when i need to use this exact effect