{"id":2947471,"date":"2025-12-15T04:00:49","date_gmt":"2025-12-15T12:00:49","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2947471"},"modified":"2025-12-15T05:32:53","modified_gmt":"2025-12-15T13:32:53","slug":"choreographing-the-dance-of-the-continents","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/mapping\/choreographing-the-dance-of-the-continents","title":{"rendered":"Choreographing the dance of the continents"},"author":7221,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[398132,780895,780894],"industry":[],"product":[380802],"class_list":["post-2947471","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis-storymaps","tag-continental-drift","tag-plate-tectonics","product-arcgis-storymaps"],"acf":{"short_description":"The Esri StoryMaps Editorial team describes how they produced an innovative story on continental drift","flexible_content":[{"acf_fc_layout":"content","content":"

Allen:<\/strong> I’ve long been enthralled by the fact that, over hundreds of millions of years, Earth’s continents have been in constant motion \u2014 crawling outward from mid-ocean ridges, sliding past one another, and colliding to build mountain ranges and form supercontinents. I’ve stared at visualizations and animations that depict these movements, usually mapped onto an elliptical projection (Mollweide, to be precise). Much of this work was pioneered by Christopher Scotese<\/a>, whose paleogeographic plottings have been featured by National Geographic (my former employer) and other media outlets.<\/p>\n

As much as I admire these maps and animations, I find them a bit frustrating. Landforms that are close to the edge of the maps are distorted and often split in two. And it’s difficult to relate the movement of the continents to the evolution of life on Earth. Belatedly, I realized that ArcGIS StoryMaps could be the ideal venue to depict this stately continental dance; illustrations could provide a sense of how life was evolving, enduring climate shifts and mass extinctions as the continents crept. Thus was born the idea of depicting the dance of the continents in the form of a StoryMaps narrative. Here’s our story<\/strong><\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2950545,"id":2950545,"title":"Cont drift gif","filename":"Cont-drift-gif.gif","filesize":12708994,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/mapping\/choreographing-the-dance-of-the-continents\/cont-drift-gif-2","alt":"","author":"7221","description":"","caption":"","name":"cont-drift-gif-2","status":"inherit","uploaded_to":2947471,"date":"2025-12-03 12:39:27","modified":"2025-12-03 12:39:27","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":896,"height":662,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif.gif","medium-width":353,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif.gif","medium_large-width":768,"medium_large-height":567,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif.gif","large-width":896,"large-height":662,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif.gif","1536x1536-width":896,"1536x1536-height":662,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif.gif","2048x2048-width":896,"2048x2048-height":662,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif-629x465.gif","card_image-width":629,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/Cont-drift-gif.gif","wide_image-width":896,"wide_image-height":662}},"image_position":"left","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Meanwhile, my team and I have long wanted to experiment with a function that some of our users have wished for; namely, the ability to have animations move as readers scroll. We often talk about “map choreography<\/a>,” but maps in ArcGIS StoryMaps usually jump from location to location, or theme to theme, unless they’re recorded and embedded as videos. The New York Times and other media organizations have done cool things with scroll-driven movement; couldn’t we do it, too, and ultimately, perhaps, enable our users to create their own?<\/p>\n

Continental drift seemed to be the ideal topic to bring to life using scroll-driven navigation. So I recruited two technical wizards on my team \u2014 Lee Bock<\/strong> and Warren Davison<\/strong> \u2014 to prototype this function, using the “dance of the continents” story as a testbed. Meanwhile, Gustavo Cardenas, a designer and illustrator on our team, took on the task of creating line drawings depicting some of the dominant life forms of the various periods depicted on the maps. I now turn this blog over to Lee and Warren to explain their wizardry.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"content","content":"

Lee: <\/strong>Since \u201cscrolly animation\u201d is not a built-in function of ArcGIS StoryMaps, this prototype required us to extend the story\u2019s functionality using custom JavaScript \u2014 something made possible by StoryMap\u2019s relatively new script embed<\/a> capability. While script embed<\/em> is intended primarily to enable seamless embedding of a story in a web page, with a bit of determination you can use it for other kinds of mischief!<\/p>\n

Before going any further, I should acknowledge that using script embed to create scrolly animation is\u2026 ambitious. The hack described below is more than a little convoluted. But that\u2019s prototyping for you! If you want to explore the code for yourself, you\u2019re welcome to dive into the repo<\/a>.<\/p>\n

With those caveats in place, here\u2019s a high-level walk-through of the configuration.<\/p>\n"},{"acf_fc_layout":"content","content":"

Hosting<\/h2>\n

One of the first things you might notice is that the story appears under an unusual domain. Instead of the standard *.maps.arcgis.com, our prototype runs at:<\/p>\n

https:\/\/esri.github.io\/dance-of-the-continents\/<\/p>\n

This is a direct consequence of needing to host and execute additional JavaScript. Since you can\u2019t host arbitrary script files on ArcGIS Online, we need to place both the container web page and our custom scripts elsewhere \u2014 in this case, GitHub Pages.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2950419,"id":2950419,"title":"Page diagram","filename":"Page-diagram.png","filesize":568884,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/mapping\/choreographing-the-dance-of-the-continents\/page-diagram","alt":"","author":"7221","description":"","caption":"Cooperation between two different websites","name":"page-diagram","status":"inherit","uploaded_to":2947471,"date":"2025-12-02 17:09:53","modified":"2025-12-02 17:25:16","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1921,"height":696,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram.png","medium-width":464,"medium-height":168,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram.png","medium_large-width":768,"medium_large-height":278,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram.png","large-width":1920,"large-height":696,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram-1536x557.png","1536x1536-width":1536,"1536x1536-height":557,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram.png","2048x2048-width":1921,"2048x2048-height":696,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram-826x299.png","card_image-width":826,"card_image-height":299,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Page-diagram.png","wide_image-width":1920,"wide_image-height":696}},"image_position":"right","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Important distinction: The story itself still lives on story.maps.arcgis.com; we simply load it into our container page via embed.<\/p>\n

Script Embed<\/h2>\n

We\u2019ve established that our main page is hosted on GitHub Pages and that it loads the story using script embed. Traditionally, you\u2019d embed a story using an <iframe>. Unfortunately, iframes impose strict cross-origin security restrictions that prevent parent pages from interacting with the content inside \u2014 a deal-breaker for scrolly animation, which requires our scripts to \u201csee\u201d what\u2019s happening inside the story.<\/p>\n

That\u2019s where the script embed capability becomes invaluable: it gives the parent page safe, first-class access to the story\u2019s DOM, making it possible to hook into the story and modify its behavior at runtime.<\/p>\n"},{"acf_fc_layout":"content","content":"

Double Trouble<\/h2>\n

Our GitHub Pages site actually contains two different web pages (each with its own codebase):<\/p>\n

The primary application<\/strong> URL: https:\/\/esri.github.io\/dance-of-the-continents\/index.html<\/a><\/p>\n

This page embeds the story, attaches listeners to it, and monitors scrolling. As the reader progresses through the narrative, this application sends messages \u2014 via postMessage \u2014 to the secondary application.<\/p>\n

The secondary application <\/strong>URL: https:\/\/esri.github.io\/dance-of-the-continents\/frames_display\/<\/a><\/p>\n

This is a simple workhorse slide viewer. It listens for incoming postMessage events and swaps out visual \u201cframes\u201d based on the slide index it receives.<\/p>\n

If you visit the secondary application directly, it looks like a static, inert web page. That\u2019s because it only changes when it receives messages \u2014 not via direct user interaction.<\/p>\n

Okay, this next bit is the twist, and I\u2019ve been racking my brain for an icebreaker, so here goes\u2026<\/p>\n"},{"acf_fc_layout":"content","content":"

Incepted Embeds<\/h2>\n

Are you familiar with the episode of The Big Bang Theory<\/a> in which Sheldon builds a \u201cMobile Virtual Presence Device\u201d? It\u2019s basically a rolling robot with a webcam and a flat-panel display that shows Sheldon\u2019s face. He uses it as a proxy so he can \u201cbe present\u201d without actually being in the room. And yes, I know \u2014 I should probably update my cultural references.<\/p>\n

In any case, the setup reminds me a bit of our application architecture, which involves two layers of embeds. Much like Sheldon\u2019s face is embedded in the robot, our slide-viewer component is embedded inside the story. And here\u2019s the kicker: the story itself is then embedded inside our primary website \u2014 just as the robot is\u2026 wheeled into the room.<\/p>\n

Yeah, that\u2019s the ticket: In this analogy, our main web page is the room. And just as Penny can yell at iPad-Sheldon in response to whatever the robot is doing, our web page can send messages to the slide viewer based on how the user is interacting with the story. I told you it was a little convoluted!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2950422,"id":2950422,"title":"Site containers","filename":"Site-containers.png","filesize":563226,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/mapping\/choreographing-the-dance-of-the-continents\/site-containers","alt":"","author":"7221","description":"","caption":"A slide viewer, wrapped in a story, swaddled in a web page.","name":"site-containers","status":"inherit","uploaded_to":2947471,"date":"2025-12-02 17:11:47","modified":"2025-12-02 17:25:50","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1520,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers.png","medium-width":367,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers.png","medium_large-width":768,"medium_large-height":546,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers.png","large-width":1520,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers.png","1536x1536-width":1520,"1536x1536-height":1080,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers.png","2048x2048-width":1520,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers-654x465.png","card_image-width":654,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/11\/Site-containers.png","wide_image-width":1520,"wide_image-height":1080}},"image_position":"left","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Enough for now<\/h2>\n

That\u2019s the 30,000-foot view: nested embeds and a bit of JavaScript glue holding everything together. Prototypes like this let us explore what\u2019s possible when you push StoryMaps beyond its comfort zone.<\/p>\n

If you\u2019d like to dig deeper, the repo<\/a> is available.\u00a0 Here\u2019s a little guidance on where to look if you go there.<\/p>\n