Why Writing a Pinch-to-Zoom Component Is Harder Than You Think

Talk: Oli Legat - “Why Writing a Pinch-to-Zoom Component Is Harder Than You Think”, React Summit US 2025

At first glance, building a pinch-to-zoom and pan component in React seems simple. After all, the browser’s gesture events are already there. But when you need realistic, design-friendly motion and the ability to zoom axes independently, the problem gets much trickier. In this talk, I’ll share how we approached this challenge in our AG Charts React component: from the pitfalls of naïve implementations, to the realisation that pan and zoom are mathematically identical problems. You’ll see how some pen & paper algebra unlocked a precise and intuitive gesture system where X and Y scales update independently—kept in sync with React state—delivering smooth interactions beyond what you get in maps or images.