demos/PrefersReducedMotion.html

<!--
    Codepen sample: https://codepen.io/kellyhutchins/pen/bGxqWwg
-->

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <title>
        2023 Developer Summit: GoToOverrides to disable animation
    </title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />

    <script src="https://js.arcgis.com/4.26/"></script>

    <script>
        require(["esri/views/MapView", "esri/WebMap"], (MapView, WebMap) => {
            const webmap = new WebMap({
                portalItem: {
                    id: "f2e9b762544945f390ca4ac3671cfa72"
                }
            });

            const view = new MapView({
                map: webmap,
                container: "viewDiv"
            });

            view.popup.goToOverride = goToOverride;


            function goToOverride(view, goToParams) {
                const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
                if (mediaQuery.matches) {
                    goToParams.options = {
                        ...goToParams.options,
                        ...{
                            animate: false,
                        },
                    };
                }
                return view.goTo(goToParams.target, goToParams.options);
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>