diff --git a/index.html b/index.html
index a9f3c3a..3ddd2ee 100644
--- a/index.html
+++ b/index.html
@@ -141,9 +141,13 @@
     <div id="map"></div>
     <div id="story"></div>
 
+    <script src="./config.js"></script>
+    <div id="map"></div>
+    <div id="story"></div>
+
     <script src="./config.js"></script>
     <script>
-        var initLoad = true;
+       var initLoad = true;
         var layerTypes = {
             'fill': ['fill-opacity'],
             'line': ['line-opacity'],
@@ -152,14 +156,14 @@
             'raster': ['raster-opacity'],
             'fill-extrusion': ['fill-extrusion-opacity'],
             'heatmap': ['heatmap-opacity']
-        }
+        };
 
         var alignments = {
             'left': 'lefty',
             'center': 'centered',
             'right': 'righty',
             'full': 'fully'
-        }
+        };
 
         function getLayerPaintType(layer) {
             var layerType = map.getLayer(layer).type;
@@ -168,17 +172,20 @@
 
         function setLayerOpacity(layer) {
             var paintProps = getLayerPaintType(layer.layer);
+            var options = layer.duration ? { "duration": layer.duration } : {};
             paintProps.forEach(function (prop) {
-                var options = {};
-                if (layer.duration) {
-                    var transitionProp = prop + "-transition";
-                    options = { "duration": layer.duration };
-                    map.setPaintProperty(layer.layer, transitionProp, options);
-                }
                 map.setPaintProperty(layer.layer, prop, layer.opacity, options);
             });
         }
 
+        function debounce(func, delay) {
+            let timer;
+            return function (...args) {
+                clearTimeout(timer);
+                timer = setTimeout(() => func.apply(this, args), delay);
+            };
+        }
+
         var story = document.getElementById('story');
         var features = document.createElement('div');
         features.setAttribute('id', 'features');
@@ -288,9 +295,51 @@
             marker.setLngLat(config.chapters[0].location.center).addTo(map);
         }
 
-        // instantiate the scrollama
+        // Instantiate the scrollama
         var scroller = scrollama();
 
+        var debouncedStepEnter = debounce(async function (response) {
+            var current_chapter = config.chapters.findIndex(chap => chap.id === response.element.id);
+            var chapter = config.chapters[current_chapter];
+
+            response.element.classList.add('active');
+            map[chapter.mapAnimation || 'flyTo'](chapter.location);
+
+            if (config.showMarkers) {
+                marker.setLngLat(chapter.location.center);
+            }
+            if (chapter.onChapterEnter.length > 0) {
+                chapter.onChapterEnter.forEach(setLayerOpacity);
+            }
+            if (chapter.callback) {
+                window[chapter.callback]();
+            }
+            if (chapter.rotateAnimation) {
+                map.once('moveend', () => {
+                    const rotateNumber = map.getBearing();
+                    map.rotateTo(rotateNumber + 180, {
+                        duration: 30000,
+                        easing: t => t
+                    });
+                });
+            }
+            if (config.auto) {
+                var next_chapter = current_chapter + 1;
+                if (next_chapter < config.chapters.length) {
+                    map.once('moveend', () => {
+                        document.querySelectorAll('[data-scrollama-index="' + next_chapter.toString() + '"]')[0].scrollIntoView();
+                    });
+                }
+            }
+        }, 100);
+
+        var debouncedStepExit = debounce(function (response) {
+            var chapter = config.chapters.find(chap => chap.id === response.element.id);
+            response.element.classList.remove('active');
+            if (chapter.onChapterExit.length > 0) {
+                chapter.onChapterExit.forEach(setLayerOpacity);
+            }
+        }, 100);
 
         map.on("load", function () {
             if (config.use3dTerrain) {
@@ -300,10 +349,10 @@
                     'tileSize': 512,
                     'maxzoom': 14
                 });
-                // add the DEM source as a terrain layer with exaggerated height
+                // Add the DEM source as a terrain layer with exaggerated height
                 map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
 
-                // add a sky layer that will show when the map is highly pitched
+                // Add a sky layer that will show when the map is highly pitched
                 map.addLayer({
                     'id': 'sky',
                     'type': 'sky',
@@ -313,61 +362,22 @@
                         'sky-atmosphere-sun-intensity': 15
                     }
                 });
-            };
+            }
 
-            // setup the instance, pass callback functions
+            // Setup the instance, pass callback functions
             scroller
                 .setup({
                     step: '.step',
                     offset: 0.5,
                     progress: true
                 })
-                .onStepEnter(async response => {
-                    var current_chapter = config.chapters.findIndex(chap => chap.id === response.element.id);
-                    var chapter = config.chapters[current_chapter];
-
-                    response.element.classList.add('active');
-                    map[chapter.mapAnimation || 'flyTo'](chapter.location);
-
-                    if (config.showMarkers) {
-                        marker.setLngLat(chapter.location.center);
-                    }
-                    if (chapter.onChapterEnter.length > 0) {
-                        chapter.onChapterEnter.forEach(setLayerOpacity);
-                    }
-                    if (chapter.callback) {
-                        window[chapter.callback]();
-                    }
-                    if (chapter.rotateAnimation) {
-                        map.once('moveend', () => {
-                            const rotateNumber = map.getBearing();
-                            map.rotateTo(rotateNumber + 180, {
-                                duration: 30000, easing: function (t) {
-                                    return t;
-                                }
-                            });
-                        });
-                    }
-                    if (config.auto) {
-                        var next_chapter = (current_chapter + 1) % config.chapters.length;
-                        map.once('moveend', () => {
-                            document.querySelectorAll('[data-scrollama-index="' + next_chapter.toString() + '"]')[0].scrollIntoView();
-                        });
-                    }
-                })
-                .onStepExit(response => {
-                    var chapter = config.chapters.find(chap => chap.id === response.element.id);
-                    response.element.classList.remove('active');
-                    if (chapter.onChapterExit.length > 0) {
-                        chapter.onChapterExit.forEach(setLayerOpacity);
-                    }
-                });
-
+                .onStepEnter(debouncedStepEnter)
+                .onStepExit(debouncedStepExit);
 
             if (config.auto) {
                 document.querySelectorAll('[data-scrollama-index="0"]')[0].scrollIntoView();
             }
-        });    
+        });
 
     </script>