Recording an interaction and extracting insights from it is the core of Lapse.
Let’s dive into it.
Each section of this page contains an interactive demo. The goal is to use Lapse to play with the demos and see how Lapse can help you. The tool is available at the bottom of the screen. Enjoy!
Running animations in slow motion allows you to see things you would not be able to notice at full speed. This is incredibly useful when you think something feels off, but you can’t quite put your finger on it.
Hit ⇧S to cycle the speed, or click the clock icon in the panel.
The spinner is pretty simple, but it illustrates the change in speed well. Let’s now look at something a bit more complex. The Dynamic Island below animates pretty well, but when you slow it down, you can see a flaw. If you click fast enough, you will see the content jump.
This is a detail that is hard to spot at full speed, but trust me, even when you are not consciously aware of it, it can make the whole animation feel off. And just recording the animation wouldn’t help you spot it, so an actual real slow motion recording is very helpful.
To inspect the DOM while scrubbing, press ⇧I. Inspecting is not enabled by default.
It’s especially useful, because you can interact with it in slow motion, which no other tool allows you to do, and this in turn allows you to test so many edge cases.
I remember how I used to record an animation with my devtools open. I would then scrub through the recording to see the exact values of the properties at some frames, trying to find the moment when something went wrong, and hoping those values would help me understand the problem.
With Lapse, you can press ⇧R to record an interaction, and then scrub through the recording straight in your browser.
You get a timeline you can drag through, and the page freezes at whatever frame you’re sitting on. I want to emphasize that this is not a video of that frame, it’s the actual DOM at that frame, so you can inspect it in devtools.
This is also useful for intro animations, you can press ⇧L to record right when the page loads. This would’ve been so useful for me when I was working on the latest Linear homepage.
Try and scrub through the animation below with Lapse (the tool is at the bottom of your viewport). There’s one thing that feels off, can you spot it?