<script>
import { onMount } from 'svelte'
import {tweened} from 'svelte/motion'
const rotate = tweened(0, {duration: 1000, delay: 0})
const pos = tweened(0, {duration: 500, delay: 1000})
const scale = tweened(1, {duration: 500, delay: 1500})
function start() {
rotate.set(360)
pos.set(200)
scale.set(4)
}
function end() {
scale.set(1)
pos.set(0)
rotate.set(0)
}
</script>
<div class="container">
<h1>
Staggered animations
</h1>
<p>Place mouse cursor over the purple box.</p>
<div class="box" style="transform: rotate({$rotate}deg) translate({$pos}px) scale({$scale})" on:mouseover={start} on:mouseout={end}>
I'm a thing
</div>
</div>
<style>