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.
This talk has been presented at React Summit US 2025, check out the latest edition of this React Conference.