[Bug] ZoomWidget transitionDuration Not Working — Zooming Jumps Instantly Without Animation

[mrsiahpoosh]

Description

I'm experiencing an issue with the transitionDuration property in the ZoomWidget for DeckGL. When I set a custom transition duration (e.g., 3000ms), the zooming action jumps instantly to the new zoom level without any smooth animation. Instead of smoothly zooming in or out, the map immediately jumps to the desired zoom level, which makes the user experience feel abrupt.

Even if i dont use transitionDuration , still zoom in/out jumps in ZoomWidget.

here is my code

const deck = new Deck({
  canvas: 'deck-canvas',
  width: null,
  height: null,
  useDevicePixels: false,
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  layers: [],
  widgets: [
    new ZoomWidget({ transitionDuration: 3000, style: widgetTheme.value }),
    new CompassWidget({ style: widgetTheme.value }),
    // new FullscreenWidget({ style: widgetTheme.value }),
  ],
  getTooltip: ({ object }) =>
    object &&
    object.title != undefined && {
      html: `<h2>${object.title}</h2>`,
      style: {
        marginLeft: layoutStore.isSidebarOpen
          ? directionStore.isRtl
            ? '-240px'
            : '10px'
          : '10px',
        boxShadow: 'var(--light-box-shadow)',
        borderRadius: 'var(--radius-rounded)',
        backgroundColor: 'rgba(255 255 255 / 80%)',
      },
    },
  getCursor: (d: any) =>
    d.isDragging == true ? 'grabbing' : d.isHovering == true ? 'pointer' : 'grab',
  onViewStateChange: (viewState: any) => {
    if (!map) {
      return;
    }
    map.jumpTo({
      center: [viewState.viewState.longitude, viewState.viewState.latitude],
      zoom: viewState.viewState.zoom,
      bearing: viewState.viewState.bearing,
      pitch: viewState.viewState.pitch,
    });

    deck.setProps({
      initialViewState: {
        longitude: viewState.viewState.longitude,
        latitude: viewState.viewState.latitude,
        zoom: viewState.viewState.zoom,
        bearing: viewState.viewState.bearing,
        pitch: viewState.viewState.pitch,
      },
    });
  },
});

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

No response

Steps to Reproduce

1- Add the ZoomWidget with a specified transitionDuration (e.g., 3000ms).
2- Interact with the map (e.g., zoom in/out).
3 - Notice that the zooming occurs instantly, without any animation.

Environment

• Framework version: [email protected]
• Browser: Chrome 131.0.6778.86
• OS: window 10

Logs

No response