FOSS4G 2022 general tracks

Liven up your webmaps with custom microanimations
08-25, 15:30–15:35 (Europe/Rome), Room Limonaia

Micro animations are small animations on a website that support the user by attracting focus to where we want their attention. They can also be used to support relationships between elements in a web application, for example a list element and a map feature, or simply to spark a little joy. Users today have come to expect these animations in their online experiences. How can we provide these features in a web map? Map libraries gives you some animations out of the box today, but what if you want something custom?

This presentation will give examples on how small animations can be used in web maps to support interactivity. We will walk through building our own, custom animation that can be used as a starting point for many types of animations in web maps. The technique is library-agnostic, so we’ll show examples in both MapLibre GL JS, Leaflet and OpenLayers.

Mappy web developer based in Copenhagen, Denmark 🇳🇴 🇩🇰 🐶 🎸 🏐 🗺 💻