A tooltip animation that's so simple, but SO satisfying
In this video we'll be recreating an amazing tooltip animation that was created by one of the engineers of Linear.
... Almost ready!
The Linear team did it again! Below you see a tweet by one of the co-founders of Linear, showing an amazing tooltip design created by one of their engineers. It just looks awesome! And exactly that is what we'll be going to recreate in this video.
We'll be animating the active tooltip item into view by making use of the
scrollIntoView API. This API is
perfect for helping us with animating an element into view. Most of the time you'll probably use this for
scrolling the whole website – but today I'll show you that you can do way more with this API!
Building the chart and tooltip itself
We'll also be focussing on adding the chart and styling the tooltip itself. We won't be diving into chart libraries though, since this video is not about charts at all. Use the video timestamps if you immediately want to skip to the part where we'll be adding the animations!