Live cursors are interesting. You don't really want to be constantly sending updates but you do want the cursors to move smoothly and naturally like this. What's the trick?
Here's what it looks like without any animations.
Regular tweens/duration-based animations won't work here because each new update will "redirect" the animation. While the cursor is moving from A to B, a new update may come in that means it should move instead from its current point (C) to point D instead.
Here's what that looks like. Notice the animation always seems to be starting over—tween's just aren't designed to blend into new destinations.
A spring animation on the other hand, with its a more robust physical model, will preserve its current momentum and velocity when beginning a new animation. Pretty cool!
springs by @framer motion, live backend by @liveblocks, app is tldraw.com
Part II:
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.