Css animation help

How can I achieve this type of animation?
12 Replies
Rägnar O'ock
Rägnar O'ock16mo ago
You could do it by having the background as a separate element. You would then only have to animate the sliding animation and the width increasing and decreasing. Both can be done with transforms for improved performance
hashirhehehe
hashirhehehe16mo ago
Can you send me code?
Joao
Joao16mo ago
So you don't actually want help, you want someone to do it for you. You should update the title, then.
hashirhehehe
hashirhehehe16mo ago
what do you mean by it? I don't know animation, transform properties I am learning them I only want this one animation so, I can understand what's going inside the hood, even it is not a project or any work or homework.
Mannix
Mannix16mo ago
this looks like a job for intersectionObserver doesn't it ?
Jochem
Jochem16mo ago
to trigger the animations, yeah
Rägnar O'ock
Rägnar O'ock16mo ago
You would learn nothing by having the code handed to you on a platter, it's much more instructive to try to do it yourself, even if you don't get exactly the result you want. When you get to a point where it works but not quite it will be way easier for you to make it how you want because you would actually know how it works instead of just knowing how to do it.
Jochem
Jochem16mo ago
to add to that, you're also asking people here to duplicate and tailor a bunch of information for you that's available in a million youtube tutorials and articles online. Learn some basic CSS transforms, then if you get stuck or something is unclear, ask for help then 🙂
hashirhehehe
hashirhehehe16mo ago
oh ok Now i get it thanks
Elodere
Elodere16mo ago
https://www.youtube.com/watch?v=h2AOXBeVrgI&ab_channel=KevinPowell If you look at Kevin Powell's recent video you can see that he actually created something that has a very similar effect. The styled ::after element, in the video I linked, expands and repositions very similarly to what you see in the video you linked.
Kevin Powell
YouTube
Recreating YouTube’s tab animation
Someone asked me if I could recreate the underline effect in YouTube’s tabs, and it looked pretty fun to do! I wanted to stick with using transform and scale for the underline animation as it’s better for performance, even if it meant it’s a little trickier than simply moving the left and right properties around. 🔗 Links ✅ Starting code: http...
Elodere
Elodere16mo ago
What you're doing essentially is manipulating the leftOffset and width values (on the pseudo-element) relative to the individual leftOffsets and widths of the tabs
chukwuebuka65
chukwuebuka6515mo ago
You need knowledge of the IntersectionObserver API and CSS transform to pull this off. Read up those two. It’s quite easy
Want results from more Discord servers?
Add your server