Bluescape: Table of Contents

Long-press Animation & Performance Tuning

As our touchscreen support improved, we wanted to add some discoverability to the long-press gesture, as we’d begun to lean more heavily on context menus that would traditionally appear when right-clicking in a desktop context. We designed several simple animation sequences and settled on a ring encircling the user’s finger. There’s a very precise set of delays and timings that give the user a chance to “cancel” the long-press gesture if it wasn’t their intent. All this happens in less than a second, so extremely smooth performance is very important.

Accordingly, I built the same animation using a wide range of web technologies:

Javascript to Canvas

Javascript to SVG

Pre-rendered sprite sheet

Not every technique is available in every context, but this composition is simple enough that the trade-offs involved come down to whether the GPU can be utilized and a classic balance of memory vs bandwidth vs CPU usage.