Smooth Transitions for MapLibre GL JS

A powerful plugin that adds feature level transition functionality to MapLibre GL JS maps. Animate colors, sizes, opacities, and more with customizable easing functions.

Install via npm View on GitHub

Interactive Examples

→

Basic Transition

Learn the fundamentals with simple property transitions. Animate opacity, radius, and other numeric properties with customizable duration and easing.

🎨

Color Animation

Smooth color transitions using D3's color interpolation. Supports RGB, HSL, and LAB color spaces for perceptually uniform transitions.

🌈

Color Cycling

Create color cycles with multiple breakpoints. Transition through a spectrum of colors for eye-catching visual effects.

📈

Easing Functions

Explore all available easing functions from d3-ease. Compare linear, elastic, bounce, and other easing types side by side.

⚡

Multiple Properties

Transition multiple style properties simultaneously. Create coordinated visual effects with synchronized animations.

🔗

Chained Transitions

Chain transitions using the onComplete callback. Build complex, sequential animations that flow smoothly from one to the next.

👆

Hover Effects

Interactive hover-triggered transitions. Add smooth visual feedback when users interact with map features.

📊

Multi-Breakpoint

Advanced transitions with multiple breakpoints. Create complex piecewise animations with 3 or more values.

Getting Started

Installation

npm install maplibre-transition

Quick Example

import maplibregl from 'maplibre-gl';
import MaplibreTransition from 'maplibre-transition';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [0, 0],
  zoom: 2
});

// Initialize the plugin
MaplibreTransition.init(map);

// Use transitions
map.transition(feature, {
  duration: 1000,
  ease: 'elastic',
  paint: {
    'circle-radius': [8, 20],
    'circle-color': ['#667eea', '#64b5f6']
  }
});