I'd like to slow the speed of the zoom transition in Leaflet, but I haven't figured out how.

I'm using map.setView() a few times to change the zoom level.

I've tried the solution suggested here: Setting a slower zoom speed

Which is to increase the transition time in CSS for

.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: 2s;

But, it doesn't seem to work. It starts to slow down, but then just jumps to the zoom level, so it doesn't look smooth at all.

The pan animation, and duration works great.

I've tried all these options:

map.setView([lat, long], 14, {
    pan: {
        animate: true,
        duration: 1.5
    zoom: {
        animate: true


var map = L.map("map", {
    center: [45.2403, -123.8512],
    zoom: 12,
    fadeAnimation: true,
    zoomAnimation: true

But nothing seems to slow or smooth the zoom transition.

4 Answers 4


Your map.flyTo() has the options malformed, you want

map.flyTo([lat, long], 14, {
        animate: true,
        duration: 1.5

See Doc's pan-options. The same parameters will work fine also with panTo() and setView() methods.


After looking closer at the documentation, I found it's better to use:

flyTo(<LatLng> latlng, <Number> zoom?, 
    <Zoom/pan options> options?

Instead of:

setView(<LatLng> center, <Number> zoom?,
    <Zoom/pan options> options?

At least for my purpose. It slows the zoom down, and appears a bit more smooth. However, it'd be nice to have more control over the zoom speed, but this is good enough for now.


But, it doesn't seem to work. It starts to slow down, but then just jumps to the zoom level

That's because of this one line of code here, with a hard-coded duration:


setTimeout(L.bind(this._onZoomTransitionEnd, this), 250);

Ideally, the zoom animations in Leaflet 1.x would be defined by the CSS transform. However, problems with cross-browser compatibility made necessary to hard-code that timeout.

You could overload the private _animateZoom by doing something like L.Map.prototype._animateZoom = function (center, zoom, startAnim, noUpdate) { ... }, doing an ugly copy-paste of the original but changing the duration there. That, however, is a very very ugly hack and totally not recommended.

  • 2
    Ivan: are you telling me that monkey patching private methods is not recommended?
    – atlefren
    Feb 15, 2017 at 14:37

With ReactLeaflet v2 this worked for me:

    createLeafletElement() {
        if (L.Browser.chrome) {
            L.Browser.passiveEvents = true                                  // to better performance
        const MapInfo = L.Control.extend({
            onAdd: (map) => {
                map.setZoom(26, { animate: true, duration: 2000 })
                this.panelDiv = L.DomUtil.create('newZoomDiv');
                return this.panelDiv;

        return new MapInfo();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.