Css animation help
How can I achieve this type of animation?
12 Replies
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 performanceCan you send me code?
So you don't actually want help, you want someone to do it for you. You should update the title, then.
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.
this looks like a job for intersectionObserver doesn't it ?
to trigger the animations, yeah
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.
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 🙂
oh ok Now i get it thanks
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...
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
You need knowledge of the IntersectionObserver API and CSS transform to pull this off. Read up those two. It’s quite easy