<div class="square"></div>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-width: 100%;
}
.square {
background-color: blue;
width: 5rem;
height: 5rem;
&.full-screen {
width: 100vw;
height: 100vh;
background-color: goldenrod;
}
}
button {
position: fixed;
bottom: 0;
left: 0;
padding: 1rem 2rem;
}
View Compiled
const square = document.querySelector(".square");
let first, last, deltaX, deltaY, deltaW, deltaH, flipAnimation;
calculateFlip();
square.addEventListener("click", () => {
flipAnimation.playState === "finished"
? flipAnimation.reverse()
: flipAnimation.play();
});
function calculateFlip() {
// Get default (first) value
first = square.getBoundingClientRect();
square.classList.add("full-screen");
// Get final (last) value
last = square.getBoundingClientRect();
square.classList.remove("full-screen");
// Delta means the difference between
deltaX = last.left - first.left;
deltaY = last.top - first.top;
deltaW = last.width / first.width;
deltaH = last.height / first.height;
// Web Animation API
flipAnimation = square.animate(
[
// from
{
transformOrigin: "top left",
transform: `translate3d(0px, 0px, 0px) scale(1)`,
backgroundColor: "blue"
},
// to
{
transformOrigin: "top left",
transform: `
translate3d(${deltaX}px, ${deltaY}px, 0px)
scale(${deltaW}, ${deltaH})
`,
backgroundColor: "goldenrod"
}
],
{
duration: 500,
easing: "ease-in-out",
fill: "both",
direction: "alternate"
}
);
flipAnimation.pause();
}
// For resizing:
window.addEventListener("resize", calculateFlip);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.