<div class="container">
    <div class="switch">
        <div class="ball"></div>
    </div>
</div>

<script type="module">
    import { animate } from "https://cdn.jsdelivr.net/npm/motion@12.12.0/+esm"

    // From https://easings.net/#easeOutBounce
    function bounceEase(x) {
        const n1 = 7.5625
        const d1 = 2.75

        if (x < 1 / d1) {
            return n1 * x * x
        } else if (x < 2 / d1) {
            return n1 * (x -= 1.5 / d1) * x + 0.75
        } else if (x < 2.5 / d1) {
            return n1 * (x -= 2.25 / d1) * x + 0.9375
        } else {
            return n1 * (x -= 2.625 / d1) * x + 0.984375
        }
    }

    const bounce = {
        duration: 1.2,
        ease: bounceEase,
    }

    const spring = {
        type: "spring",
        stiffness: 700,
        damping: 30,
    }

    const ball = document.querySelector(".ball")
    const switchEl = document.querySelector(".switch")
    let isOn = true

    switchEl.addEventListener("click", () => {
        isOn = !isOn

        animate(ball, { y: isOn ? 0 : 120 }, isOn ? spring : bounce)
    })
</script>

<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 100vh;
    }

    .switch {
        width: 80px;
        height: 200px;
        background-color: #fff3;
        display: flex;
        align-items: flex-start;
        border-radius: 50px;
        padding: 10px;
        cursor: pointer;
    }

    .ball {
        width: 80px;
        height: 80px;
        background-color: #f5f5f5;
        border-radius: 40px;
        will-change: transform;
    }
</style>