Hide Table of Contents
View Customize navigation animation sample in sandbox
Customize navigation animation


This sample shows how you can customize the animation behavior of the map it pans. The panDuration and panRate are Dojo animation properties that determine the duration of the animation and the rate of frame refresh, respectively. These properties are both measured in milliseconds and default to 350 for the pan duration and 25 for the pan rate. For more information on Dojo animation, refer to the Reference Guide and API Reference on dojo/_base/fx and the Dojo animation tutorial.

You can adjust the properties in this sample to get the best look for your data and application. For example, if your map takes a long time to load, you might increase the pan duration so that the user will spend less time looking at an empty screen while waiting for the panned map to load. Conversely, if your map loads quickly, you might decrease the duration to give the map a faster feel.


<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Customize Map Navigation Animation</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
    <script src="https://js.arcgis.com/3.46/"></script>
      var map;

      require(["esri/map", "esri/config", "dojo/domReady!"], function(Map, esriConfig) {
        //configure map animation to be faster
        esriConfig.defaults.map.panDuration = 1; // time in milliseconds, default panDuration: 350
        esriConfig.defaults.map.panRate = 1; // default panRate: 25
        esriConfig.defaults.map.zoomDuration = 100; // default zoomDuration: 500
        esriConfig.defaults.map.zoomRate = 1; // default zoomRate: 25

        map = new Map("map", {
          basemap: "satellite",
          center: [-93.5, 36.972],
          zoom: 5
    <div id="map"></div>
Show Modal