diff --git a/.gitignore b/.gitignore
index 7aab9bca..167502e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+public/TCEI-IECT
 .DS_Store
 node_modules
 /dist
diff --git a/StoryRampSchema.json b/StoryRampSchema.json
index 511c8719..4416d5ad 100644
--- a/StoryRampSchema.json
+++ b/StoryRampSchema.json
@@ -243,6 +243,25 @@
                     "type": "string",
                     "description": "Supporting text content for the map."
                 },
+                "zoomDetails": {
+                    "type": "object",
+                    "description": "Attributes to zoom to point of interest.",
+                    "properties": {
+                        "x": {
+                            "type": "number",
+                            "description": "X coordinate of point."
+                        },
+                        "y": {
+                            "type": "number",
+                            "description": "Y coordinate of point."
+                        },
+                        "zoom": {
+                            "type": "number",
+                            "description": "Scale value when zooming map."
+                        },
+                        "required": ["x", "y", "zoom"]
+                    }
+                },
                 "customTemplates": {
                     "type": "array",
                     "description": "An array of custom template names that will need to be registered on the map component.",
@@ -283,6 +302,10 @@
                     "default": "",
                     "enum": ["", "left", "right"]
                 },
+                "duration": {
+                    "type": "number",
+                    "description": "Animation duration of zoom."
+                },
                 "points": {
                     "type": "array",
                     "description": "A list of points of interest.",
diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
index 06e7ee38..1d76e144 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -13,6 +13,71 @@
         "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/bg.jpg"
     },
     "slides": [
+        {
+            "title": "Zoomies with Interactive CSS Animation",
+            "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/map.jpg",
+            "bgCssClasses": "img-zoomies",
+            "panel": [
+                {
+                    "title": "Locator map - static image with animations as background",
+                    "type": "text",
+                    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+                    "customStyles": "",
+                    "cssClasses": "right-align"
+                }
+            ],
+            "includeInToc": false
+        },
+        {
+            "title": "Zoomies with RAMP API",
+            "panel": [
+                {
+                    "config": "00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json",
+                    "type": "map",
+                    "zoomDetails": {
+                        "x": -123.71534,
+                        "y": 49.113141,
+                        "zoom": 2000000
+                    },
+                    "scrollguard": true
+                },
+                {
+                    "title": "Locator map as RAMP",
+                    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+                    "type": "text"
+                }
+            ],
+            "includeInToc": false
+        },
+        {
+            "title": "Interactive Map with Zoomies",
+            "panel": [
+                {
+                    "config": "00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json",
+                    "type": "interactive-map",
+                    "scrollguard": true,
+                    "title": "Interactive Map with Zoom to Salish Sea",
+                    "points": [
+                        {
+                            "title": "Home Extent",
+                            "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+                            "target": {
+                                "returnHome": true
+                            }
+                        },
+                        {
+                            "title": "Point of Interest",
+                            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+                            "target": {
+                                "layerId": "Salish_Sea_Boundaries",
+                                "oid": 1
+                            }
+                        }
+                    ],
+                    "duration": 2000
+                }
+            ]
+        },
         {
             "title": "Overview",
             "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
@@ -581,7 +646,7 @@
             ]
         }
     ],
-    "tocOrientation": "horizontal",
+    "tocOrientation": "vertical",
     "stylesheets": ["00000000-0000-0000-0000-000000000000/styles/main.css"],
     "contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html",
     "contextLabel": "Explore National Pollutant Release Inventory data",
diff --git a/public/00000000-0000-0000-0000-000000000000/assets/en/map.jpg b/public/00000000-0000-0000-0000-000000000000/assets/en/map.jpg
new file mode 100644
index 00000000..06c5214d
Binary files /dev/null and b/public/00000000-0000-0000-0000-000000000000/assets/en/map.jpg differ
diff --git a/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json b/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json
index 4562be37..f751f5c2 100644
--- a/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json
+++ b/public/00000000-0000-0000-0000-000000000000/ramp-config/CommunityDirectory.json
@@ -230,8 +230,8 @@
                     {
                         "id": "EXT_NRCAN_Lambert_3978",
                         "default": {
-                            "xmin": -14122466.687850542,
-                            "xmax": -11280232.228095304,
+                            "xmin": -15122466.687850542,
+                            "xmax": -12280232.228095304,
                             "ymin": 6247479.46145181,
                             "ymax": 8125995.868587801,
                             "spatialReference": {
@@ -243,8 +243,8 @@
                     {
                         "id": "EXT_ESRI_World_AuxMerc_3857",
                         "default": {
-                            "xmin": -14122466.687850542,
-                            "xmax": -11280232.228095304,
+                            "xmin": -15122466.687850542,
+                            "xmax": -12280232.228095304,
                             "ymin": 6247479.46145181,
                             "ymax": 8125995.868587801,
                             "spatialReference": {
@@ -443,7 +443,7 @@
                     },
                     "mergeGrids": [
                         {
-                            "gridId": "CommunityDirectory",
+                            "gridId": "Community Directory",
                             "layers": [
                                 {
                                     "layerId": "CD"
diff --git a/public/00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json b/public/00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json
new file mode 100644
index 00000000..f46a89fb
--- /dev/null
+++ b/public/00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json
@@ -0,0 +1,207 @@
+{
+    "configs": {
+        "en": {
+            "map": {
+                "extentSets": [
+                    {
+                        "id": "EXT_ESRI_World_AuxMerc_3857",
+                        "default": {
+                            "xmax": -5007771.626060756,
+                            "xmin": -16632697.354854,
+                            "ymax": 10015875.184845109,
+                            "ymin": 5022907.964742964,
+                            "spatialReference": {
+                                "wkid": 102100,
+                                "latestWkid": 3857
+                            }
+                        }
+                    }
+                ],
+                "lodSets": [
+                    {
+                        "id": "LOD_ESRI_World_AuxMerc_3857",
+                        "lods": [
+                            {
+                                "level": 0,
+                                "resolution": 19567.87924099992,
+                                "scale": 73957190.948944
+                            },
+                            {
+                                "level": 1,
+                                "resolution": 9783.93962049996,
+                                "scale": 36978595.474472
+                            },
+                            {
+                                "level": 2,
+                                "resolution": 4891.96981024998,
+                                "scale": 18489297.737236
+                            },
+                            {
+                                "level": 3,
+                                "resolution": 2445.98490512499,
+                                "scale": 9244648.868618
+                            },
+                            {
+                                "level": 4,
+                                "resolution": 1222.992452562495,
+                                "scale": 4622324.434309
+                            },
+                            {
+                                "level": 5,
+                                "resolution": 611.4962262813797,
+                                "scale": 2311162.217155
+                            },
+                            {
+                                "level": 6,
+                                "resolution": 305.74811314055756,
+                                "scale": 1155581.108577
+                            },
+                            {
+                                "level": 7,
+                                "resolution": 152.87405657041106,
+                                "scale": 577790.554289
+                            },
+                            {
+                                "level": 8,
+                                "resolution": 76.43702828507324,
+                                "scale": 288895.277144
+                            },
+                            {
+                                "level": 9,
+                                "resolution": 38.21851414253662,
+                                "scale": 144447.638572
+                            },
+                            {
+                                "level": 10,
+                                "resolution": 19.10925707126831,
+                                "scale": 72223.819286
+                            },
+                            {
+                                "level": 11,
+                                "resolution": 9.554628535634155,
+                                "scale": 36111.909643
+                            },
+                            {
+                                "level": 12,
+                                "resolution": 4.77731426794937,
+                                "scale": 18055.954822
+                            },
+                            {
+                                "level": 13,
+                                "resolution": 2.388657133974685,
+                                "scale": 9027.977411
+                            },
+                            {
+                                "level": 14,
+                                "resolution": 1.1943285668550503,
+                                "scale": 4513.988705
+                            },
+                            {
+                                "level": 15,
+                                "resolution": 0.5971642835598172,
+                                "scale": 2256.994353
+                            },
+                            {
+                                "level": 16,
+                                "resolution": 0.29858214164761665,
+                                "scale": 1128.497176
+                            },
+                            {
+                                "level": 17,
+                                "resolution": 0.14929107082380833,
+                                "scale": 564.248588
+                            },
+                            {
+                                "level": 18,
+                                "resolution": 0.07464553541190416,
+                                "scale": 282.124294
+                            },
+                            {
+                                "level": 19,
+                                "resolution": 0.03732276770595208,
+                                "scale": 141.062147
+                            },
+                            {
+                                "level": 20,
+                                "resolution": 0.01866138385297604,
+                                "scale": 70.5310735
+                            }
+                        ]
+                    }
+                ],
+                "tileSchemas": [
+                    {
+                        "id": "DEFAULT_ESRI_World_AuxMerc_3857",
+                        "name": "Web Mercator Maps",
+                        "extentSetId": "EXT_ESRI_World_AuxMerc_3857",
+                        "lodSetId": "LOD_ESRI_World_AuxMerc_3857",
+                        "thumbnailTileUrls": ["/tile/8/91/74', '/tile/8/91/75"]
+                    },
+                    {
+                        "id": "EXT_ESRI_World_AuxMerc_3857#LOD_ESRI_World_AuxMerc_3857",
+                        "name": "Web Mercator Maps",
+                        "extentSetId": "EXT_ESRI_World_AuxMerc_3857",
+                        "lodSetId": "LOD_ESRI_World_AuxMerc_3857",
+                        "thumbnailTileUrls": ["/tile/8/91/74", "/tile/8/91/75"],
+                        "hasNorthPole": false
+                    }
+                ],
+                "basemaps": [
+                    {
+                        "id": "esriOcean",
+                        "tileSchemaId": "DEFAULT_ESRI_World_AuxMerc_3857",
+                        "layers": [
+                            {
+                                "layerType": "esri-tile",
+                                "url": "https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer",
+                                "opacity": 1
+                            }
+                        ]
+                    },
+                    {
+                        "id": "baseEsriWorld",
+                        "name": "World Imagery",
+                        "description": "World Imagery provides one meter or better satellite and aerial imagery in many parts of the world and lower resolution satellite imagery worldwide.",
+                        "altText": "World Imagery",
+                        "layers": [
+                            {
+                                "id": "World_Imagery",
+                                "layerType": "esri-tile",
+                                "url": "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
+                            }
+                        ],
+                        "tileSchemaId": "EXT_ESRI_World_AuxMerc_3857#LOD_ESRI_World_AuxMerc_3857",
+                        "attribution": {
+                            "text": {
+                                "disabled": true
+                            },
+                            "logo": {
+                                "disabled": true
+                            }
+                        }
+                    }
+                ],
+                "initialBasemapId": "baseEsriWorld"
+            },
+            "legend": {
+                "type": "structured",
+                "root": {
+                    "name": "root",
+                    "children": [
+                        {
+                            "layerId": "Salish_Sea_Boundaries"
+                        }
+                    ]
+                }
+            },
+            "layers": [
+                {
+                    "id": "Salish_Sea_Boundaries",
+                    "name": "Salish Sea Boundaries",
+                    "layerType": "esri-feature",
+                    "url": "https://ecqcj8ywvwsd025.ncr.int.ec.gc.ca:6443/arcgis/rest/services/CWS-SCF_Storylines/TMXLocator/MapServer/0"
+                }
+            ]
+        }
+    }
+}
diff --git a/public/00000000-0000-0000-0000-000000000000/styles/main.css b/public/00000000-0000-0000-0000-000000000000/styles/main.css
index 3fcfcadb..2a365feb 100644
--- a/public/00000000-0000-0000-0000-000000000000/styles/main.css
+++ b/public/00000000-0000-0000-0000-000000000000/styles/main.css
@@ -1,3 +1,26 @@
 .textPanelOutline {
     border: 2px solid black;
-}
\ No newline at end of file
+}
+
+.right-align {
+    margin-left: auto !important;
+    margin-right: 10% !important;
+    max-width: 600px;
+}
+
+.img-zoomies {
+    margin: auto;
+    animation: zoom-in-zoom-out 8s ease infinite;
+}
+
+@keyframes zoom-in-zoom-out {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
diff --git a/src/components/panels/helpers/point-of-interest-item.vue b/src/components/panels/helpers/point-of-interest-item.vue
index 7423c058..69a1a406 100644
--- a/src/components/panels/helpers/point-of-interest-item.vue
+++ b/src/components/panels/helpers/point-of-interest-item.vue
@@ -30,7 +30,7 @@ import MarkdownIt from 'markdown-it';
 import Fullscreen from './fullscreen.vue';
 
 const poi = ref();
-const emit = defineEmits(['poi-changed']);
+const emit = defineEmits(['return-home', 'poi-changed']);
 
 const md = new MarkdownIt({ html: true });
 const mdContent = ref('');
@@ -87,7 +87,9 @@ const intersectionHandler = (entries: IntersectionObserverEntry[], observer: Int
         const attribs = props.point.target;
 
         if (point.isIntersecting) {
-            emit('poi-changed', attribs.layerId, attribs.oid, attribs.layerIndex);
+            attribs.returnHome
+                ? emit('return-home')
+                : emit('poi-changed', attribs.layerId, attribs.oid, attribs.layerIndex);
         }
     });
 };
diff --git a/src/components/panels/interactive-map.vue b/src/components/panels/interactive-map.vue
index bee4d58c..50ff073b 100644
--- a/src/components/panels/interactive-map.vue
+++ b/src/components/panels/interactive-map.vue
@@ -12,6 +12,7 @@
                         :point="point"
                         :index="index"
                         @poi-changed="handlePoint"
+                        @return-home="returnHome"
                     ></PointOfInterestItem>
                 </div>
             </div>
@@ -20,7 +21,12 @@
         <div class="h-full align-middle w-full interactive-container sticky" v-else>
             <div class="interactive-content z-50">
                 <div v-for="(point, index) in config.points" :key="`poi-` + index" class="point-of-interest-container">
-                    <PointOfInterestItem :point="point" :index="index" @poi-changed="handlePoint"></PointOfInterestItem>
+                    <PointOfInterestItem
+                        :point="point"
+                        :index="index"
+                        @poi-changed="handlePoint"
+                        @return-home="returnHome"
+                    ></PointOfInterestItem>
                 </div>
             </div>
             <div :id="`ramp-map-${slideIdx}`" class="bg-gray-200 h-story rv-map sticky interactive-content"></div>
@@ -140,11 +146,21 @@ const handlePoint = (id: string, oid: number, layerIndex?: number) => {
 
             // Add the new highlight in.
             const g = await targetLayer.getGraphic(oid, { getGeom: true, getStyle: true });
-            await instance.geo.map.zoomMapTo(g.geometry, 4622324.434309);
+            props.config.duration
+                ? await instance.geo.map.zoomMapTo(g.geometry, 4622324.434309, true, props.config.duration)
+                : await instance.geo.map.zoomMapTo(g.geometry, 4622324.434309);
             await hl.addHilight(g);
         });
     });
 };
+
+const returnHome = async () => {
+    // zoom out to home extent=
+    const extentSet = rInstance.value.geo.map.getExtentSet();
+    props.config.duration
+        ? await rInstance.value.geo.map.zoomMapTo(extentSet.fullExtent, null, true, props.config.duration)
+        : await rInstance.value.geo.map.zoomMapTo(extentSet.fullExtent);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/panels/map-panel.vue b/src/components/panels/map-panel.vue
index 00cd6843..38648864 100644
--- a/src/components/panels/map-panel.vue
+++ b/src/components/panels/map-panel.vue
@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import MarkdownIt from 'markdown-it';
 import { i18n } from '@storylines/lang';
 import { createInstance } from 'ramp-pcar';
@@ -70,6 +70,7 @@ const grid = ref();
 const intersectTimeoutHandle = ref(-1);
 const mapComponent = ref<Element | undefined>(undefined);
 const md = new MarkdownIt({ html: true });
+const zoomEvent = ref<number | undefined>(undefined);
 
 onMounted(() => {
     const observer = new IntersectionObserver(
@@ -155,12 +156,44 @@ const setupMap = (config: any) => {
         });
     }
 
+    async function zoomAnimation() {
+        // extract zoom extent details from storylines map config
+        const zoomPoint = new rInstance.geo.geom.Point('pointOfInterest', [
+            props.config.zoomDetails?.x,
+            props.config.zoomDetails?.y
+        ]);
+
+        // zoom in to specified point of interest
+        await rInstance.geo.map.zoomMapTo(zoomPoint, props.config.zoomDetails?.zoom, true, 3000);
+        // zoom out to home extent
+        const extentSet = rInstance.geo.map.getExtentSet();
+        await rInstance.geo.map.zoomMapTo(extentSet.fullExtent, null, true, 3000);
+
+        // repeat next zoom animation
+        setTimeout(() => {
+            zoomAnimation();
+        }, 1000);
+    }
+
+    if (props.config.zoomDetails) {
+        rInstance.event.on('map/created', () => {
+            // set continuous loop of zoom in/out animation
+            zoomAnimation();
+        });
+    }
+
     // Dispatch an event to indicate that the map has been loaded.
     const event = new CustomEvent('map-created', {
         detail: { rInstance: rInstance, customTemplates: props.config.customTemplates }
     });
     document.dispatchEvent(event);
 };
+
+onBeforeUnmount(() => {
+    if (zoomEvent.value) {
+        clearInterval(zoomEvent.value);
+    }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/story/background-image.vue b/src/components/story/background-image.vue
index 295dc931..0ff29b25 100644
--- a/src/components/story/background-image.vue
+++ b/src/components/story/background-image.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sticky z-10 grid-background" style="top: 60px; height: 100vh">
+    <div class="sticky z-10 grid-background overflow-hidden" style="top: 60px; height: 100vh">
         <!-- Vue3 transition for switching between a slide with no background a slide with a background. -->
         <Transition name="fade" mode="out-in">
             <div v-if="state.newImage !== 'none'" class="w-full h-full">
@@ -11,7 +11,7 @@
                 />
                 <img
                     class="fade-in transition-img w-full h-full object-cover"
-                    :class="{ 'transition-hide': activeImage === 1 }"
+                    :class="[cssClasses, { 'transition-hide': activeImage === 1 }]"
                     :src="state.newImage"
                     id="primaryImage"
                     role="presentation"
@@ -34,6 +34,9 @@ const props = defineProps({
     },
     configFileStructure: {
         type: Object as PropType<ConfigFileStructure>
+    },
+    cssClasses: {
+        type: String
     }
 });
 
diff --git a/src/components/story/story-content.vue b/src/components/story/story-content.vue
index feab8860..6c0bd1dd 100644
--- a/src/components/story/story-content.vue
+++ b/src/components/story/story-content.vue
@@ -27,6 +27,7 @@
             <BackgroundImage
                 :src="backgroundImage"
                 :configFileStructure="configFileStructure"
+                :cssClasses="backgroundCss"
                 @background-changed="handleBackgroundChange"
             ></BackgroundImage>
 
@@ -39,7 +40,7 @@
                     :id="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
                     :name="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
                 >
-                    <slide
+                    <storylines-slide
                         :config="slide"
                         :configFileStructure="configFileStructure"
                         :class="addPanelPadding(idx)"
@@ -48,7 +49,7 @@
                         :background="hasBackground"
                         :lazyLoad="config.lazyLoad ?? true"
                         @slide-changed="handleSlideChange"
-                    ></slide>
+                    ></storylines-slide>
                 </div>
             </scrollama>
         </div>
@@ -59,13 +60,13 @@
 import type { PropType } from 'vue';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { ConfigFileStructure, StoryRampConfig } from '@storylines/definitions';
+import { ConfigFileStructure, Slide, StoryRampConfig } from '@storylines/definitions';
 import 'intersection-observer';
 
 import ChapterMenu from './chapter-menu.vue';
 import HorizontalMenu from './horizontal-menu.vue';
 import BackgroundImage from './background-image.vue';
-import Slide from './slide.vue';
+import StorylinesSlide from './slide.vue';
 import Scrollama from '@storylines/components/panels/helpers/scrollama.vue';
 
 const route = useRoute();
@@ -100,6 +101,7 @@ const activeChapterIndex = ref(-1);
 const horizontalNavHeight = ref(0);
 const backgroundImage = ref<string>('none');
 const hasBackground = ref<boolean>(false); // different from above; this considers animation time
+const backgroundCss = ref<string>('');
 
 onMounted(() => {
     const hash = route?.hash.substring(1);
@@ -125,8 +127,10 @@ onMounted(() => {
 });
 
 const handleSlideChange = (event: number): void => {
-    const img = props.config.slides[event].backgroundImage;
-    backgroundImage.value = !!img ? img : 'none';
+    const img = (props.config.slides[event] as Slide).backgroundImage;
+    backgroundImage.value = img ? img : 'none';
+    const cssClasses = (props.config.slides[event] as Slide).bgCssClasses;
+    backgroundCss.value = cssClasses ? cssClasses : '';
 };
 
 /**
@@ -147,7 +151,11 @@ const stepEnter = ({ element }: { element: HTMLElement }): void => {
 
 // add top padding for a panel with bg image, on the condition that the previous panel did not have a bg image
 const addPanelPadding = (idx: number): string => {
-    if (idx > 0 && !props.config.slides[idx - 1].backgroundImage && props.config.slides[idx].backgroundImage) {
+    if (
+        idx > 0 &&
+        !(props.config.slides[idx - 1] as Slide).backgroundImage &&
+        (props.config.slides[idx] as Slide).backgroundImage
+    ) {
         return 'pt-8';
     } else {
         return '';
diff --git a/src/definitions.ts b/src/definitions.ts
index b60c8ad5..a29e15d3 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -128,6 +128,7 @@ export interface Slide {
     index: number;
     backgroundImage: string;
     includeInToc?: boolean;
+    bgCssClasses?: string;
 }
 
 export enum PanelType {
@@ -167,6 +168,11 @@ export interface MapPanel extends BasePanel {
     caption: string;
     scrollguard: boolean;
     teleportGrid?: string;
+    zoomDetails?: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
     customTemplates: string[];
 }
 
@@ -177,6 +183,7 @@ export interface InteractiveMapPanel extends BasePanel {
     scrollguard: boolean;
     points: PointOfInterest[];
     teleportAOI?: string;
+    duration?: number;
 }
 
 export interface PointOfInterest {
@@ -190,6 +197,7 @@ export interface PointOfInterest {
 export interface PointOfInterestTarget {
     oid: number;
     layerId: string;
+    returnHome?: boolean;
     layerIndex?: number;
     icon?: string;
 }