<div></div>

div {
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            width: 100px;
            height: 100px;
            background-color: crimson;
            cursor: pointer;
        }

        const div = document.querySelector("div");
        let parts = [];
        let animations = [];


        div.onclick = (e) => {

            const poof = document.createElement("span")
            poof.style = `
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            width: ${div.offsetWidth}px;
            height: ${div.offsetHeight}px;
            `

            div.parentElement.append(poof)



            for (let y = 0; y < 4; y++) {
                for (let x = 0; x < 4; x++) {
                    const part = document.createElement("span")
                    part.style = `
                    position: absolute;
                    width: 25px;
                    height: 25px;
                    background-color: crimson;
                    left: ${x * 25}px;
                    top: ${y * 25}px;
                    transform-origin: center center;
                    
                    `
                    parts.push(part)
                    poof.append(part)
                }
            }


            parts.forEach((p, i) => {
                const
                    row = Math.floor(i / 4),
                    col = i % 4,
                    center = { x: (4 - 1) / 2, y: (4 - 1) / 2 },
                    normalized_index = { x: col - center.x, y: row - center.y }

                animations.push(
                    p.animate([
                        { transform: `translate(${normalized_index.x * 50}px,${normalized_index.y * 50}px) scale(0.001)` }
                    ], {
                        duration: 1000,
                        easing: "ease",
                        fill: "forwards"
                    })
                )



            })

            animations.unshift(
                div.animate([
                    { transform: "scale(0)" }
                ], {
                    duration: 250,
                    fill: "forwards",
                })
            )


            return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })
        }