ExtraStatic: powerful and easy publishing

Skip to content

Add animation for maps from prior map

Chris Dawson requested to merge add_animated_maps_from_prior into main

If you add multiple maps to your YFM, and then you use start: previous in your animation configuration, this will make Maps animate from the prior location when the intersection observer fires (i.e. when the next map scrolls into view).

Example:

_config.yml:

title: Public.do
description: Do incredible things with public domain works.
maps:
  animate:
    duration: 2000
    start: previous

A sample post:

---
title: "The Pirahã people and their language"
published: true
date: 2023-09-28
maps:
  function_based_internet_solution:  
    center: '6.514166°S, 61.729860°W'
    index: 0
  function_based_internet_solution2:  
    center: '26.514166°S, 21.729860°W'
    index: 1
  function_based_internet_solution3:  
    center: '16.514166°S, 41.729860°W'
    index: 2
  function_based_internet_solution4:  
    center: '18.514166°S, 21.729860°W'
    index: 3
  function_based_internet_solution5:  
    center: '6.514166°S, 61.729860°W'
    index: 4
  function_based_internet_solution6:  
    center: '26.514166°S, 21.729860°W'
    index: 5
  function_based_internet_solution7:  
    center: '16.514166°S, 41.729860°W'
    index: 6
  function_based_internet_solution8:  
    center: '18.514166°S, 21.729860°W'
    index: 7
---

<script>
import Map from '$svekyll/Map.svelte';
</script>

<Map center={maps.function_based_internet_solution.center} {maps}/>

<Map center={maps.function_based_internet_solution2.center} {maps}/>

<Map center={maps.function_based_internet_solution3.center} {maps}/>

<Map center={maps.function_based_internet_solution4.center} {maps}/>

<Map center={maps.function_based_internet_solution5.center} {maps}/>

<Map center={maps.function_based_internet_solution6.center} {maps}/>

<Map center={maps.function_based_internet_solution7.center} {maps}/>

Merge request reports

Loading