Animated transition of leaflet Marker icon

Question

I have a Leaflet marker with a BLUE icon (from a PNG image source). On mouse hovering, I want to make that a RED icon.

This is the code for doing so:

            let placeMarker = L.marker(...);

            let cssSetter = function (imarker, iicon) {
                imarker.setIcon(iicon);
            };

            placeMarker.on('mouseover', 
                L.bind(cssSetter, null, placeMarker, markerIcon_red)
            );
            placeMarker.on('mouseout', 
                L.bind(cssSetter, null, placeMarker, markerIcon)
            );

Now I want to do this transition gradually, with an animation.

How can I do this?

Answer 1

Write your own CSS transition.

http://css3.bradshawenterprises.com/cfimg/

---

Or use plugin Leaflet.TransitionedIcon

https://github.com/naturalatlas/leaflet-transitionedicon