issue

issue.vue

<template>
  <div class="story">
    <h1 v-refs:sequence>opt out the yellow pages</h1>
    <p
      v-refs:sequence
    >Before Internet, one mean to contact people in different places of the world was using the phone.</p>
    <p v-refs:sequence>Each individuals were connected to each others by copper cables.</p>
    <img
      src="https://www.thisiscolossal.com/wp-content/uploads/2014/09/tower-1.jpg"
      v-refs:sequence
    />
    <p v-refs:sequence>Connected to this wireframe, you were given a phone number.</p>
    <pre v-refs:sequence :duration="1000">+336 20 40 62 67</pre>
    <p v-refs:sequence>This address is given by an authority, usually the state.</p>
    <p v-refs:sequence>And it is listed in a repertory, called the white pages.</p>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/7/76/New_haven_directory_1878.jpg"
      v-refs:sequence
    />
    <div v-refs:sequence>
      <p>This way, with your fresh new phone from the 19th century, you could call people from Eindhoven to London.</p>
      <portal to="map" tag="g" slim v-if="current">
        <map-marker :coordinates="[-0.118092, 51.509865]">
          <circle r="2" fill="red" />
        </map-marker>
        <map-marker :coordinates="[51.44083, 5.47778]">
          <circle r="2" fill="red" />
        </map-marker>
      </portal>
    </div>
  </div>
</template>

<script>
import anime from "animejs/lib/anime.es.js";
import { ref, watch, computed } from "@vue/composition-api";

export default {
  setup() {
    const sequence = ref([]);
    const animate = async () => {
      const last = sequence.value.length - 1;
      for (const [i, elt] of sequence.value.entries()) {
        const getAttr = (attr, def) =>
          (elt.attributes[attr] && elt.attributes[attr].value) || def;

        await anime({
          targets: elt,
          opacity: 1,
          duration:
            getAttr("duration") || (getAttr("stop", null) && 30000) || 500,
          direction: i === last && "alternate",
          begin: () => (elt.style.display = "block"),
          complete: () => (elt.style.display = "none")
        }).finished;
      }

      animate();
    };

    watch(sequence, () => {
      if (!sequence.value.length) return;
      animate();
    });
    return {
      sequence,
      current: computed(
        () => sequence.value.length > 8 && sequence.value[9].style.display !== "none"
      )
    };
  }
};
</script>

<style scoped>
.story > * {
  opacity: 0;
  display: none;
}

p {
  max-width: 50rem;
  font-size: 1.6rem;
}

img {
  max-width: 100%;
}
</style>