Scene - goTo() | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to customize camera flight animations in a Scene using the options property of the goTo method.

By adjusting properties such as speedFactor and easing, you can control how fast the camera moves and how it behaves as it approaches the target.

For example, the snippet below defines a flight that is slower than the default and gradually eases out when reaching the destination:

const options = {
  speedFactor: 0.1, // animation is 10 times slower than default
  easing: "cubic-out", // easing function to slow down when reaching the target
};

viewElement.goTo(target, options);

arcgis-navigation-toggle

calcite-components

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Scene - goTo() | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.1/"></script>

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
      }

      #controlsPanel {
        position: absolute;
        bottom: 1rem;
        left: 0;
        right: 0;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem;
      }
    </style>
  </head>

  <body>
    <arcgis-scene basemap="dark-gray-vector" ground="world-elevation" zoom="4">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
    </arcgis-scene>
    <div id="controlsPanel">
      <calcite-button id="default">Default flight</calcite-button>
      <calcite-button id="linearSlow">Linear slow flight</calcite-button>
      <calcite-button id="linearFast">Linear fast flight</calcite-button>
      <calcite-button id="expoIncrease">Exponentially increasing speed flight</calcite-button>
      <calcite-button id="fixedDuration">10 seconds flight</calcite-button>
      <calcite-button id="bounceBerlin">Bounce to Berlin</calcite-button>
    </div>
    <script type="module">
      /*****************************************************************
       * Get a reference to the HTML elements
       *****************************************************************/
      const viewElement = document.querySelector("arcgis-scene");

      // Wait for the view to initialize
      await viewElement.viewOnReady();

      /*****************************************************************
       * Add event listeners to go to a target point using animation options
       *****************************************************************/

      // The target point is a new camera obtained by shifting the current camera 30 degrees to the east

      function shiftCamera(deg) {
        const camera = viewElement.camera.clone();
        camera.position.longitude += deg;
        return camera;
      }

      function catchAbortError(error) {
        if (error.name != "AbortError") {
          console.error(error);
        }
      }

      document.getElementById("default").addEventListener("click", () => {
        // Don't set any animation options for a default camera flight
        viewElement.goTo(shiftCamera(60)).catch(catchAbortError);
      });

      document.getElementById("linearSlow").addEventListener("click", () => {
        viewElement
          .goTo(
            shiftCamera(60),
            // Animation options for a slow linear camera flight
            {
              speedFactor: 0.1,
              easing: "linear",
            },
          )
          .catch(catchAbortError);
      });

      document.getElementById("linearFast").addEventListener("click", () => {
        viewElement
          .goTo(
            shiftCamera(60),
            // Animation options for a fast linear camera flight
            {
              speedFactor: 6,
              easing: "linear",
            },
          )
          .catch(catchAbortError);
      });

      document.getElementById("expoIncrease").addEventListener("click", () => {
        viewElement
          .goTo(
            shiftCamera(60),
            // Animation options for a camera flight with an increasing speed
            {
              duration: 4000,
              easing: "expo-in",
            },
          )
          .catch(catchAbortError);
      });

      document.getElementById("fixedDuration").addEventListener("click", () => {
        viewElement
          .goTo(shiftCamera(30), {
            duration: 10000,
            maxDuration: 10000, // Make sure to set maxDuration if the duration is bigger than 8000 ms
          })
          .catch(catchAbortError);
      });

      // Define your own function for the easing option
      function customEasing(t) {
        return 1 - Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(0.5, t * 10);
      }

      document.getElementById("bounceBerlin").addEventListener("click", () => {
        viewElement
          .goTo(
            {
              position: {
                x: 13.4,
                y: 52.52,
                z: 700000,
                spatialReference: {
                  wkid: 4326,
                },
              },
              heading: 0,
              tilt: 0,
            },
            {
              speedFactor: 0.3,
              easing: customEasing,
            },
          )
          .catch(catchAbortError);
      });
    </script>
  </body>
</html>