Animating leaflet points

This is a naive way of animating points in leaflet.

In a css file, add the keyframes and details of the css animation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fadein {
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
  /* animation-duration is set in code to a random number */
}

Then, where you create the Leaflet circle:

1
2
3
4
5
6

let c = L.circle([0, 10]);
c.addTo(map);
// add animation to circles
let e = c.getElement() as HTMLElement
e.classList.add("fadein");
e.style.animationDuration = `${Math.random() * 2}s`