<script>
// based on: https://codesandbox.io/s/framer-motion-2-layout-animations-kij8p
// usually this import strategy should work:
//import {Motion} from "svelte-motion";
import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
let isOn=false;
const toggleSwitch = () => isOn=!isOn;
const spring = {
type: "spring",
stiffness: 700,
damping: 30
};
</script>
<style>
:global(*) {
box-sizing: border-box;
}
.background{
background:linear-gradient(250deg, rgb(50,50,255), rgb(150,150,250));;
display:flex;
height:100%;
justify-content:center;
align-items:center;
}
.switch {
width: 160px;
height: 100px;
background-color: rgba(255, 255, 255, 0.4);
display: flex;
justify-content: flex-start;
border-radius: 50px;
padding: 10px;
cursor: pointer;