Skip to content

Instantly share code, notes, and snippets.

@JonathanDn
Last active September 8, 2018 13:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JonathanDn/ec200e6c2643c7951d35fb4ed7fa3343 to your computer and use it in GitHub Desktop.
Save JonathanDn/ec200e6c2643c7951d35fb4ed7fa3343 to your computer and use it in GitHub Desktop.
SCSS Animated Maximize to Minimize button and back with VanillaJS, SCSS - demo --> https://jsfiddle.net/y9waeLxg/51/
<div class="window-control-container">
<div id="minimize" class="minimize">
<div class="bottom-bar"></div>
<div class="top-bar"></div>
<div class="left-bar"></div>
<div class="right-bar"></div>
</div>
</div>
let isBeamsRaised = false;
document.getElementById('minimize').onclick = function() {
let minimize = document.getElementById('minimize');
if (isBeamsRaised) {
minimize.children[1].classList.add('lower-upper-beam');
minimize.children[2].classList.add('lower-left-beam');
minimize.children[3].classList.add('lower-right-beam');
minimize.children[1].classList.remove('raise-upper-beam');
minimize.children[2].classList.remove('raise-left-beam');
minimize.children[3].classList.remove('raise-right-beam');
isBeamsRaised = false;
} else {
minimize.children[1].classList.add('raise-upper-beam');
minimize.children[2].classList.add('raise-left-beam');
minimize.children[3].classList.add('raise-right-beam');
minimize.children[1].classList.remove('lower-upper-beam');
minimize.children[2].classList.remove('lower-left-beam');
minimize.children[3].classList.remove('lower-right-beam');
isBeamsRaised = true;
}
}
.window-control-container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: #4682B4;
.minimize {
display: flex;
justify-content: flex-end;
flex-direction: column;
width: 40px;
height: 40px;
cursor: pointer;
.bottom-bar, .top-bar, .left-bar, .right-bar {
width: 40px;
height: 4px;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
}
.top-bar, .left-bar, .right-bar {
margin-top: -4px;
}
.top-bar {
z-index: 1;
}
// * * * Animations * * * //
.raise-left-beam {
animation: raise-left-beam 0.7s forwards;
}
.raise-right-beam {
animation: raise-right-beam 0.7s forwards;
}
.raise-upper-beam {
animation: raise-upper-beam 0.7s forwards;
}
// * * * Reverse * * * //
.lower-upper-beam {
animation: lower-upper-beam 0.7s forwards;
}
.lower-left-beam {
animation: lower-left-beam 0.7s forwards;
}
.lower-right-beam {
animation: lower-right-beam 0.7s forwards;
}
}
}
// * * * Animations * * * //
@keyframes raise-left-beam {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
}
50% {
transform: translateY(-18px)
}
100% {
transform: translateY(-18px) translateX(-18px) rotate(-90deg);
}
}
@keyframes raise-right-beam {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
}
50% {
transform: translateY(-18px);
}
100% {
transform: translateY(-18px) translateX(18px) rotate(90deg);
}
}
@keyframes raise-upper-beam {
0% {
transform: translateY(0) scaleY(1);
}
50% {
transform: translateY(-34px) scaleY(1);
}
100% {
transform: translateY(-34px) scaleY(2);
}
}
// * * * Reverse Animations * * * //
@keyframes lower-upper-beam {
0% {
transform: translateY(-38px) scaleY(2);
}
50% {
transform: translateY(-38px) scaleY(1);
}
100% {
transform: translateY(0) scaleY(1);
}
}
@keyframes lower-left-beam {
0% {
transform: translateY(-18px) translateX(-18px) rotate(-90deg);
}
50% {
transform: translateY(-18px)
}
100% {
transform: translateY(0) translateX(0) rotate(0deg);
}
}
@keyframes lower-right-beam {
0% {
transform: translateY(-18px) translateX(18px) rotate(90deg);
}
50% {
transform: translateY(-18px);
}
100% {
transform: translateY(0) translateX(0) rotate(0deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment