Mapbox

code

Creating custom webmap animations

Micro animations in web applications are useful to guide users' attention. Web map libraries come with a fixed set of built-in animations, like panning, zooming, and sometimes fading styles. What if we want to do more? Using requestAnimationFrame(), we can create our own, custom animations.

Read
code

Creating custom webmap animations - Controlling duration

In the first part, we set up the application, and added animation to the feature we're adding to the map. Now let's dive into controlling the animation's duration.

Read
code

Creating custom webmap animations - Adding easing

In this last part in the series of webmap animations, let's make our animation more pleasing by adding easing. Also, see how it looks in OpenLayers.

Read