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

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Steve Ruiz

Steve Ruiz Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @steveruizok

29 Jun
perf breakthru on ios, panning and zooming back to 60 FPS
I was over here staring at the performance tab, all signs green, no dropped frames reported—while also watching things obviously skip around at <30 fps. Super frustrating, couldn't figure it out.
Finally I think, maybe I'm not actually updating the state on every frame? Of course I was, but somehow in a way that didn't quite count for Safari.
Read 7 tweets
27 Jun
A few updates to tldraw.com. First off, lots of perf improvements, even when lots of shapes are on the screen. Slickest SVG canvas on the web.
Slick when creating shapes, too.
I'm also handling window resize events much better. There's a slight debounce before showing shapes that had previously fallen outside of the viewport.
Read 9 tweets
18 May
Let's look at rotation in a canvas UI. Rotation is hard. 💀
When we have a single shape selected, we can start dragging on a handle here and then rotate the shape. The shape rotates around its center point.
When more than one item is selected, we do something a little different. We're actually making two changes to these shapes as we rotate the group. I'll show each change separately.
Read 12 tweets
16 May
something new
This is building on some of the patterns that I used in globs.design: a normal design canvas space and a code editor that can be used to create things on the canvas.
I've added the ability to create controls like these. A control's values may be used in the code; and when you change the control's value, the code will run again with the new value.
Read 6 tweets
25 Feb
Turning brush strokes into polygons is fun, but what does a regular dab-style brush engine look like in the browser? brush-engine.vercel.app
This is a *much* easier problem than creating pressure-sensitive stroke polygons. All we do is repeat a texture (in this case, a circle) at a regular distances along a line, with the pressure (real or simulated) determining the size of the texture.
This is how apps like Photoshop or Procreate work. There's some interpolation between points in order to fill in the blank spaces—and you can use a lot more data to determine the texture's size, skew, opacity, etc—but that's the general idea.
Read 5 tweets
25 Feb
Would you a design tool's exported code in a project?
Ok, some context. I've spent the week researching these kinds of features, maybe it'll help to tweet through it. 🧵
These days, we expect that a modern design tool will include some kind of "inspection" mode where a developer can view dimensions, export values for colors, typography, etc. Pretty basic but a dev can use this information in any kind of project with zero commitment.
Read 13 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(