How to Animate Multiplayer Cursors
liveblocks.io
How to Animate Multiplayer Cursors
1–10 of 64 posts
Re: How to Animate Multiplayer Cursors
#2Loved the deep dive into the difference between timing functions and spring/spline animations (ctrl-f comparison to jump to the animation).
Re: How to Animate Multiplayer Cursors
#3The animations on the blog itself are incredible. Would love to read something in the future about how you guys put this together (i.e. what frameworks, components, tooling is used to generate these blogs).
Re: How to Animate Multiplayer Cursors
#4The animations on the blog itself are incredible. Would love to read something in the future about how you guys put this together (i.e. what frameworks, components, tooling is used to generate these blogs).
That would be pretty meta! "how to create how to interactive articles" :)
Re: How to Animate Multiplayer Cursors
#5The interactive animations in this post are mind-blowingly good!!!
Re: How to Animate Multiplayer Cursors
#6There's another approach that might work better.
Instead of sampling the mouse position every 100ms, you'd save off all the mouse positions, and then send the latest batch every 100ms. The other side would then replay the exact positions, just delayed by 100ms. It'll end up with the same latency as these motion smoothing approaches, while only using slightly more bandwidth.
Re: How to Animate Multiplayer Cursors
#7Another potential approach could be using the Web Animations API with an additive/relative animation approach via the `composite: 'add'` option. I say potential as it really only fully works in Chrome atm — Firefox has it but has weird rendering bugs and Safari says it has experimental support but I've never managed to get it working.
I like the potential of this approach as it lets you get smoother results than just CSS transitions yet doesn't require you to use a RAF loop-based animation library.
Re: How to Animate Multiplayer Cursors
#8The spline stuff is super useful to me for another non-cursor idea I've had simmering.
But I'm torn by this. The spline approach seems to look the most accurate. But when all three approaches are shown at the same time at the end, I think the spring animation might look more visually pleasing. But then, if the spring approach is only degrees better than CSS transitions, is it really worth all the extra code?
Re: How to Animate Multiplayer Cursors
#9There's another approach that might work better. Instead of sampling the mouse position every 100ms, you'd save off all the mouse positions, and then send the latest batch every 100ms. The other side would then replay the exact positions, just delayed by 100ms. It'll end up with the same latency as these motion smoothing approaches, while only using slightly more bandwidth.
Yeah, wanted to say the same thing. If latency is the only problem, just batch up the updates and replay on the other end. If bandwidth also becomes a problem, only then start compressing the data. But to be honest, if we can stream video over the internet, we surely have enough bandwidth to stream cursor positions.
Re: How to Animate Multiplayer Cursors
#10Awesome deep dive!