Dramatic opening

src/LibrariesSvg.svelte

@@ -1,7 +1,12 @@
+<script lang="ts">
+   import {  fade , draw } from "svelte/transition";
+</script>
+
 <g
    id="APM"
    transform="translate(298.72484444444126, 433.0485336906215)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 3000}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle484" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle486" />
@@ -27,12 +32,19 @@
    id="BC"
    transform="translate(298.72484444444126, 393.0485336906215)"
    class="s-vynWWFEzB3Z5"
->
+   in:fade={{duration: 2000, delay: 3500}}
+   >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle498" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle500" />
    <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text502"
-      >Handbibliotheek</text
+   >Handbibliotheek</text
    >
+   </g>
+   <g
+   transform="translate(298.72484444444126, 393.0485336906215)"
+   class=""
+   in:fade={{duration: 2000, delay: 0}}
+>
    <text
       class="nodeTitle s-vynWWFEzB3Z5"
       y="38"
@@ -40,10 +52,31 @@
       id="text1097">Allard Pierson</text
    >
 </g>
+
+<path
+   style=""
+   d="M 593.04204,421.82772 V 442.57506 L 579.95449,442.42775"
+   id="path1093"
+   in:draw={{duration: 2000, delay: 2500}}
+/>
+
+<path
+   style=""
+   d="M 593.04204,421.82772 V 401.08039 L 492.42998,401.08039"
+   id="path1093"
+   in:draw={{duration: 800, delay: 2500}}
+/>
+<path
+   style=""
+   d="M 604.96062,421.82773 593.04204,421.82772"
+   id="path1095"
+   in:draw={{duration: 500, delay: 2000}}
+/>
 <g
    id="ARTIS"
    transform="translate(807.0959555555783, 551.9470916540013)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 1500}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle505" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle507" />
@@ -55,6 +88,7 @@
    id="BHBPU"
    transform="translate(408.1404000000112, 307.58142297433403)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 2500}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle512" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle514" />
@@ -66,6 +100,7 @@
    id="CEDLA"
    transform="translate(710.2181777777914, 820.5062916831351)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 500}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle519" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle521" />
@@ -76,6 +111,7 @@
    id="UBGW"
    transform="translate(160.2826222222393, 520.1182633671162)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 1500}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle526" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle528" />
@@ -87,6 +123,7 @@
    id="IVIR"
    transform="translate(730.9048444444488, 682.295035560214)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 2500}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle533" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle535" />
@@ -96,6 +133,7 @@
    id="IWO"
    transform="translate(1775.5955555555554, 3553.1193459656633)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 100}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle540" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle542" />
@@ -107,6 +145,7 @@
    id="JB"
    transform="translate(740.9048444444488, 750.295035560214)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 0}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle547" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle549" />
@@ -118,6 +157,7 @@
    id="REC"
    transform="translate(699.5315111111087, 623.2141384588231)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 2500}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle554" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle556" />
@@ -129,6 +169,7 @@
    id="AMC"
    transform="translate(1767.38706666667, 3460.8911949512853)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 1500}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle561" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle563" />
@@ -140,6 +181,7 @@
    id="PCHH"
    transform="translate(222.92706666665254, 150.79690464423038)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 800}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle568" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle570" />
@@ -151,6 +193,7 @@
    id="BETA"
    transform="translate(1687.8959555555593, 1008.3027457312287)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 2000}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle575" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle577" />
@@ -165,6 +208,7 @@
    id="UBB"
    transform="translate(220.2826222222393, 630.1182633671162)"
    class="s-vynWWFEzB3Z5"
+   in:fade={{duration: 2000, delay: 0}}
 >
    <circle r="5" class="s-vynWWFEzB3Z5" id="circle582" />
    <circle r="20" class="s-vynWWFEzB3Z5" id="circle584" />
@@ -172,16 +216,6 @@
       >UB Singel</text
    >
 </g>
-<path
-   style=""
-   d="M 492.42998,401.08039 H 593.04204 V 442.57506 L 579.95449,442.42775"
-   id="path1093"
-/>
-<path
-   style=""
-   d="M 593.04204,421.82772 604.96062,421.82773"
-   id="path1095"
-/>
 
 
 <style lang="scss">

src/Viz.svelte

@@ -160,13 +160,22 @@
         occurences: occurences,
     };
 
-    let tease_title = writable(true); //.filter((m, i) => i < 100);
+    let tease_title = writable(false); //.filter((m, i) => i < 100);
     let drawn_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
     $: opacity = Math.max(0.055, Math.min(0.3, 70 / $drawn_motions.length));
     let overlay_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
     let events = writable(<Log[]>[]); //.filter((m, i) => i < 100);
     let current_item = writable(<Item | null>null); //.filter((m, i) => i < 100);
 
+    // when teasing the title, trigger fading out and in of the libraries
+    let hide_libraries = true;
+    tease_title.subscribe((value) => {
+        if(value) {
+            hide_libraries = true;
+            setTimeout(()=> hide_libraries = false, 3000);
+        }
+    })
+
     const viz_data: VizData = {
         tease_title: tease_title,
         drawn_motions: drawn_motions,
@@ -222,7 +231,7 @@
 </script>
 
 {#if $tease_title}
-    <h1 in:fade={{duration: 3000}}>library of <span id="motiontitle">motions</span></h1>
+    <h1 in:fade={{ delay: 10000, duration: 3000}}>library of <span id="motiontitle">motions</span></h1>
 {/if}
 <div id="about">
     <span
@@ -253,7 +262,9 @@
         {/each}
     </g>
     <g id="libraries">
+        {#if !hide_libraries}
         <LibrariesSvg />
+        {/if}
         <!-- {#each locations.values() as node}
             <g id={node.code} transform="translate({node.x}, {node.y})">
                 <circle r="5"></circle>
@@ -269,7 +280,7 @@
     
     <div id="events">
         {#each $events as e}
-            <div class="entry" in:slide={{ duration: 200 }}>
+            <div class="entry" in:slide={{ duration: 200 }} out:fade={{duration: 2000}}>
                 <!-- {m['Title (Complete)']} -->
                 <span class="date" in:typewriter={{ delay: 1000, speed: 10 }}>
                     <h3>
@@ -306,7 +317,7 @@
         {/each}
     </div>
     {#if $current_item}
-        <div id="current">
+        <div id="current" in:fade={{duration: 2000}} out:fade={{duration: 2000}}>
             <h3>Logbook of</h3>
             <h2>{$current_item.title}</h2>
             <p>{[$current_item.Date, $current_item.Publisher, $current_item.Place].filter((e) => e).join(', ')}</p>
@@ -331,6 +342,8 @@
         bottom: 20px;
         left: 20px;
 
+        width: 800px;
+
         #events{
             position: relative;
             // max-height: 200px;
@@ -348,6 +361,7 @@
             
             .date {
                 width: 180px;
+                flex-shrink: 0;
             }
             .divider {
                 display: flex;
@@ -396,7 +410,7 @@
         animation: fadeout;
         animation-duration: 3s;
         animation-delay: 10s;
-        animation-timing-function: ease-in;
+        animation-timing-function: ease-in-out;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
     }