That's impressive! Is the demo public? Can I see it somewhere? 🙂 (I've actually had an idea to publish a video where I recreate this using TailwindCSS-I just haven't gotten around to it yet. 🙂)
Cool idea and works well but I am pretty sure this will break when the read direction is right-to-left so in this particular case you should use the physical properties instead of the logical ones. Also I think performance wise transitioning the element with transform should be smoother since transform does not force the browser to repaint. And last nitpick 🙈"transition: all" can backfire hard when you accidentally start to transition properties you never planned to transition. That can be both very CPU expensive and hard to debug. Again, I love the idea and the way you implemented it is really clever but I think it can be improved upon 😀
Thank you so much for the thoughtful and insightful advice, Fjonan! ❤️ Fair point about the writing mode. I've just tested it out, and it seems to be working well. The initial effect is being transitioned from bottom-right, which should make sense for that direction of languages, while jumping from one item to another works as it should. You're correct about transitioning "transform" and using "transition: all"-I'm now actually thinking about making another video where I outline and fix those mistakes. 🙂
So when I 'am positioning absolute an element ,if it is relative parent has overflow:hidden then when the positioned element is outside it's outside it is parent,that are is not visible.Rigth?
Yes, that is correct, Alex. If it's outside of parents' bounds, it won't be visible when overflow is hidden. That's why you see where those elements are when I comment out overflow:hidden.
I wanted a challenge so I replicated this in tailwindcss successfully, it's got some very confusing arbitrary group selectors but it works xD
That's impressive! Is the demo public? Can I see it somewhere? 🙂
(I've actually had an idea to publish a video where I recreate this using TailwindCSS-I just haven't gotten around to it yet. 🙂)
Cool idea and works well but I am pretty sure this will break when the read direction is right-to-left so in this particular case you should use the physical properties instead of the logical ones. Also I think performance wise transitioning the element with transform should be smoother since transform does not force the browser to repaint. And last nitpick 🙈"transition: all" can backfire hard when you accidentally start to transition properties you never planned to transition. That can be both very CPU expensive and hard to debug. Again, I love the idea and the way you implemented it is really clever but I think it can be improved upon 😀
Thank you so much for the thoughtful and insightful advice, Fjonan! ❤️
Fair point about the writing mode. I've just tested it out, and it seems to be working well. The initial effect is being transitioned from bottom-right, which should make sense for that direction of languages, while jumping from one item to another works as it should.
You're correct about transitioning "transform" and using "transition: all"-I'm now actually thinking about making another video where I outline and fix those mistakes. 🙂
@@CSSWeekly Thanks for checking it out! Great to see that different writing mode is working. Looking forward to the video.
Thank *you*! 🙂
Sir, this was a very nice, interesting, new and creative use of the :has selector, thanks for sharing!
Thank you so much for your wonderfully warm words, Marco! 🙏
Very cool effect and nicely explained. Thank you.
Hvala puno, Dalibor! 🙏
Man, you videos are amazing! Thanks for all the great work! 👏👏👏👏
Thank you so much, Alexandre! I'm delighted to hear this! 🙏
Nice effect 👍 I experimented with also putting some matching color box-shadow on the ::before -- fun!
Thanks, I'm glad you like it! 🙏
This is an interesting use case. Thanks for sharing! 🙂
So when I 'am positioning absolute an element ,if it is relative parent has overflow:hidden then when the positioned element is outside it's outside it is parent,that are is not visible.Rigth?
Yes, that is correct, Alex.
If it's outside of parents' bounds, it won't be visible when overflow is hidden. That's why you see where those elements are when I comment out overflow:hidden.