English Heritage - using React Spring to build an interactive map

At the start of the year, Gravitywell were presented with the awesome opportunity create an interactive map of myths and legends of England. Working with English Heritage and the artist Clive Hicks-Jenkins, we developed the app and launched it with a fantastic reception - we even won an award or two along the way.

The project certainly had its fair share of technical challenges, which James has already detailed here. From rich Lottie animations, shear number of image assets and unexpected memory hogs like the css scale transformation, we have already tackled a great deal of challenges which had the potential to impact the user experience.

A few months down the line, and we have revisited the map to see what else we can do to make the app an even better user experience. The main optimisation we have made is to swap out interact.js for react-use-gesture to handle user interaction, and react-spring to animate the map into place. If you haven’t checked out React Spring yet, then do so now!

React Spring is a spring-physics based animation library so instead of using duration and curves like traditional animation techniques, you provide the to and from state, pass a couple of properties such as mass, tension and friction and React Spring does the rest. The parameters you pass will affect how “springy” the animation from a -> b feels. 

Our implementation makes use of the useDrag hook provided by react-use-gesture , which lets us set new coordinates for the map based on user interaction. 

Depending on the velocity of the drag gesture, the user can click, drag and “throw” the map to move around faster. How fast the user drags before they let go affects the animation speed and the map continues to move until the inertia of their action decays. This means the map feels so much more natural and makes for a more fluid and enjoyable user experience.

The best thing about using React Spring is that it doesn’t cause any unnecessary re-renders of the app, as the library animates outside of React using a special factory called animated which extends native elements to receive animated values. This means that the performance of the app is massively improved because the animations become a separated concern from the state of the application.

In addition to using React Spring, we’ve ensured that that app makes use of the new React Hooks API, using memoisation to ensure that our components are only re-rendering when they have to. The end result of these performance optimisations and implementation of a physics based animation technique makes for a faster, more fluid, natural-feeling user experience.

View the map here.