<script>
// usually this import strategy should work:
//import {Motion} from "svelte-motion";
import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
const variants = {
visible: { opacity: 1 , x: 0},
hidden: { opacity: 0, x: -1000 },
}
</script>
<style>
:global(*) {
box-sizing: border-box;
}
.background{
background:linear-gradient(250deg, rgb(50,50,255), rgb(150,150,250));;
display:flex;
flex-direction:column;
height:100%;
justify-content:center;
align-items:center;
}
.box {
margin:2rem;
width:100px;
height:100px;
background-color:white;
}
</style>
<div class="background">
<!--Basic Animation-->
<Motion animate={{ rotate: 360 }}