body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
margin-top: 1rem;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100px;
width: 100%;
}
.box {
width: 100px;
height: 100px;
}
button {
margin: 2rem 0.5rem;
}
gsap.registerPlugin(Flip);
const squares = gsap.utils.toArray(".square");
function doFlip() {
// Get the initial state
const state = Flip.getState(squares);
// Make DOM or styling changes (swap the squares in our case)
swap(squares);
// Animate from the initial state to the end state
Flip.from(state, {duration: 2, ease: "power1.inOut"});
}
// Given an Array of two siblings, append the one that's first so it's last (swap)
function swap([a, b]) {
a.parentNode.children[0] === a ? a.parentNode.appendChild(a) : a.parentNode.appendChild(b);
}
// click to flip
document.querySelector(".button").addEventListener("click", doFlip);