Dramatic opening

This commit is contained in:
Ruben van de Ven 2024-06-22 16:35:01 +02:00
parent 7e0f414c66
commit 6d0ae9d21d
2 changed files with 65 additions and 17 deletions

View file

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

View file

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