<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Airplane Mode Toggle Switch ✈️ </title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="switch">
<div class="switch__button">
<svg
xmlns="http://www.w3.org/2000/svg"
class="airplane"
viewBox="0 0 140.351 139.63"
>
<path fill="var(--color-off)" d="M45.851,139.316s13.2-12.046,11.842-49.753c-41.162-3.584-41.285-3.448-41.285-3.448L10.1,97.9H0L7.725,69.815h0L0,41.729H10.1l6.308,11.785s.123.136,41.285-3.449C59.047,12.359,45.851.314,45.851.314s15.674-.706,17.187,0c.364.169,2.2,3.17,4.789,7.635H82.858a6,6,0,0,1,0,12H74.635c1.651,2.949,3.352,6.007,5.009,9h21.213a6,6,0,1,1,0,12h-14.6C89.473,46.806,91.7,50.9,91.7,50.9s15.527.144,31.431,1.838S140.347,69.48,140.347,69.48v.32c0,.01,0,.02,0,.031l0,.206s-1.31,15.163-17.215,16.856S91.7,88.73,91.7,88.73s-2.228,4.093-5.442,9.95h14.6a6,6,0,1,1,0,12H79.645c-1.658,2.993-3.358,6.051-5.009,9h8.222a6,6,0,1,1,0,12H67.828c-2.587,4.465-4.426,7.465-4.79,7.636a22.453,22.453,0,0,1-5.128.313C52.817,139.63,45.851,139.316,45.851,139.316Z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="airplane -on"
viewBox="0 0 140.351 139.63"
>
<path fill="var(--color-on)" d="M45.851,139.316s13.2-12.046,11.842-49.753c-41.162-3.584-41.285-3.448-41.285-3.448L10.1,97.9H0L7.725,69.815h0L0,41.729H10.1l6.308,11.785s.123.136,41.285-3.449C59.047,12.359,45.851.314,45.851.314s15.674-.706,17.187,0c.364.169,2.2,3.17,4.789,7.635H82.858a6,6,0,0,1,0,12H74.635c1.651,2.949,3.352,6.007,5.009,9h21.213a6,6,0,1,1,0,12h-14.6C89.473,46.806,91.7,50.9,91.7,50.9s15.527.144,31.431,1.838S140.347,69.48,140.347,69.48v.32c0,.01,0,.02,0,.031l0,.206s-1.31,15.163-17.215,16.856S91.7,88.73,91.7,88.73s-2.228,4.093-5.442,9.95h14.6a6,6,0,1,1,0,12H79.645c-1.658,2.993-3.358,6.051-5.009,9h8.222a6,6,0,1,1,0,12H67.828c-2.587,4.465-4.426,7.465-4.79,7.636a22.453,22.453,0,0,1-5.128.313C52.817,139.63,45.851,139.316,45.851,139.316Z"
/>
</svg>
</div>
<div class="airport-wrapper">
<div class="airport">
<div class="airport__lightLine">
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
</div>
<div class="airport__airstrip">
<div class="airport__lineContainer">
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
<div class="airport__line"></div>
</div>
</div>
<div class="airport__lightLine">
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
<div class="airport__light"></div>
</div>
</div>
</div>
<div class="sky">
<div class="cloud-line">
<div class="cloud-container">
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
</div>
<div class="cloud-container">
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
<div class="cloud">
<div class="cloud__shape"></div>
<div class="cloud__shape"></div>
</div>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js'></script><script src="./script.js"></script>
</body>
</html>
const switchContainer = document.querySelector('.switch');
const airplanes = switchContainer.querySelectorAll('.airplane');
const switchButton = switchContainer.querySelector('.switch__button');
const cloudLine = document.querySelector('.cloud-line');
const sky = document.querySelector('.sky');
const airport = document.querySelector('.airport');
const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
const getStyleVariable = (property, element = document.documentElement) => {
return getComputedStyle(element).getPropertyValue(`--${property}`);
};
const animateClouds = (() => {
const cloudFinalX = -cloudLine.children[0].clientWidth;
const cloudTimeline = gsap.timeline({ repeat: -1 });
cloudTimeline.to(cloudLine, 4, { x: cloudFinalX, duration: 2, ease: 'none' });
})();
let isAnimating = false;
const switchButtonFinalX =
switchContainer.clientWidth - switchButton.clientWidth;
const airplanesFinalX =
airplanes[0].clientWidth +
switchButton.clientWidth / 2 -
airplanes[0].clientWidth / 2;
const airplanesInitialX =
-1 * (switchButton.clientWidth / 2 - airplanes[0].clientWidth / 2);
const toggleAnimation = isOn => {
const ease = 'power2.inOut';
const duration = 0.5;
const nextState = isOn ? 'off' : 'on';
const background = getStyleVariable(`color-background-${nextState}`);
const boxShadow = getStyleVariable(`shadow-${nextState}`);
const switchButtonX = isOn ? 0 : switchButtonFinalX;
const airplanesX = isOn ? airplanesInitialX : airplanesFinalX;
const airportX = isOn ? -110 : -20;
const opacity = isOn ? 0 : 1;
gsap.to(document.body, duration, { background, ease });
gsap.to(switchContainer, duration, { boxShadow, ease });
gsap.to(switchButton, duration, {
x: switchButtonX,
ease
});
gsap.to(airplanes, duration, {
x: airplanesX,
ease
});
gsap.to(airport, duration, {
x: airportX,
ease
});
gsap.to(sky, duration, {
opacity,
ease,
onComplete() {
isAnimating = false;
}
});
};
const configOn = {
background: getStyleVariable('color-background-on'),
shadow: getStyleVariable('shadow-on'),
opacity: 1,
switchButtonX: switchButtonFinalX,
airplanesX: airplanesFinalX
};
const toggleSwitch = ({ currentTarget }) => {
if (isAnimating) return;
isAnimating = true;
const isCurrentlyOn = currentTarget.classList.contains('-on');
currentTarget.classList.toggle('-on');
toggleAnimation(isCurrentlyOn);
};
switchContainer.addEventListener('click', toggleSwitch);