✨ Finish to replace Anime with Motion One for page animations
Page intro animation and reveal that has now been simplified as Motion One manages an inView option (that uses IntersectionObserver)
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores'
|
||||
import { getContext } from 'svelte'
|
||||
import { fly, reveal } from '$animations/index'
|
||||
import reveal from '$animations/reveal'
|
||||
// Components
|
||||
import Icon from '$components/atoms/Icon.svelte'
|
||||
|
||||
@@ -42,14 +42,12 @@
|
||||
class:is-open={isOpen}
|
||||
class:is-over={isOver}
|
||||
use:reveal={{
|
||||
animation: fly,
|
||||
animation: { y: [24, 0], opacity: [0, 1] },
|
||||
options: {
|
||||
from: 24,
|
||||
to: 0,
|
||||
duration: 1000,
|
||||
easing: 'easeOutQuart',
|
||||
delay: 600,
|
||||
}
|
||||
duration: 1,
|
||||
delay: 0.6,
|
||||
threshold: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu" tabindex="0"
|
||||
|
||||
Reference in New Issue
Block a user