<div class="container">
<div class="square" id="sq1">1</div>
<div class="square" id="sq2">2</div>
</div>
body {
background-color: #222;
font-family: "Signika Negative", sans-serif, Arial;
}
.container {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.square {
width: 100px;
height: 100px;
font-size: 3em;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
color: black;
background-color: #88ce02;
cursor: pointer;
}
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 anywhere to flip
document.addEventListener("click", doFlip);
This Pen doesn't use any external CSS resources.