Look at Time Updates: Smooth zoom animations with hundreds of elements
Look at Time smoothly animates the elements on the screen while you are zooming in and out, but the more elements you have in your timeline the heavier the performance hit. Especially the time markers are a challenge. There can be thousands of them. Today, I present a new improvement step on the ladder towards a fully fluffy zooming experience.
The solution uses the intersection observer to apply transition animations on only those items that are inside the view port. Read on for the details…
The key advantage here is that the intersection observer runs on a background thread which I didn’t know until recently. It can easily observe the intersection state of hundreds of elements — amazing! 💥The observer is used to add zoom animations to only those elements that are in the view port. Other elements will have no animation thus keeping a lot of load from the GPU. Notice the amount of animations (purple) in the following comparison picture.
In the early days of Look at Time, the app could animate up to around 10 elements smoothly before beginning to stutter. Ripping out Vue from that part of the app made us go up to around a 100 elements zooming smoothly, and now we are in the realm of 1000 smooth elements on the timeline. To get to even higher numbers, we will probably need to get rid of the HTML elements being created for each time marker and time event even if they are outside the viewport.
To achieve that Look at Time will probably have its custom variant of the intersection observer, that observes bare position values of elements without them to exists as actual HTML elements to avoid the cost of creating HTML elements altogether.
