Félix Péault
fd6fc20b13
Page intro animation and reveal that has now been simplified as Motion One manages an inView option (that uses IntersectionObserver)
37 lines
1.1 KiB
Svelte
37 lines
1.1 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/atoms/site-title";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import SplitText from '$components/SplitText.svelte'
|
|
import reveal from '$animations/reveal'
|
|
import { DURATION } from '$utils/contants'
|
|
|
|
export let variant: string = 'lines'
|
|
export let tag: string = 'h1'
|
|
</script>
|
|
|
|
{#if tag === 'h1'}
|
|
<h1 class="site-title site-title--{variant}"
|
|
use:reveal={{
|
|
children: '.char',
|
|
animation: { y: ['105%', 0] },
|
|
options: {
|
|
stagger: 0.04,
|
|
duration: 1,
|
|
delay: DURATION.PAGE_IN / 1000,
|
|
threshold: 0,
|
|
},
|
|
}}
|
|
>
|
|
<SplitText text="Houses" mode="chars" class="pink mask" />
|
|
<SplitText text="Of The" mode="chars" class="middle mask" />
|
|
<SplitText text="World" mode="chars" class="pink mask" />
|
|
</h1>
|
|
{:else}
|
|
<div class="site-title site-title--{variant}">
|
|
<span class="word-1">Houses</span>
|
|
<span class="middle word-2">Of The</span>
|
|
<span class="word-3">World</span>
|
|
</div>
|
|
{/if} |