Skip to content

Instantly share code, notes, and snippets.

@AndrewHD

AndrewHD/aw-logo-animated.html

Last active July 5, 2022 22:03
Show Gist options
  • Save AndrewHD/f661df3b7c9c7d8565d672ccc7d51a86 to your computer and use it in GitHub Desktop.
Save AndrewHD/f661df3b7c9c7d8565d672ccc7d51a86 to your computer and use it in GitHub Desktop.
Download ZIP
Alternate Weekends Logo Animation
Raw
aw-logo-animated.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alternate Weekends Logo Animation</title>
</head>
<body>
<style>
:root {
--cal-width: 418px;
--margin-wide: calc((100vw - var(--cal-width)) / 2);
--cal-height: 296px;
--margin-high: calc((100vh - var(--cal-height)) / 2);
--short-week: 234px;
--short-day: 54px;
--first-stage: 1s;
--second-stage: 1s;
--font-size: 76px;
--fg: black;
--bg: white;
}
@keyframes slideright {
from {
width: 0;
}
50% {
width: calc(var(--margin-wide) + var(--cal-width));
}
to {
width: var(--cal-width);
margin-left: var(--margin-wide);
}
}
@keyframes slideleft {
from {
width: 0;
margin-left: 100vw;
}
50% {
width: calc(var(--margin-wide) + var(--cal-width));
margin-left: var(--margin-wide);
}
to {
width: var(--cal-width);
margin-left: var(--margin-wide);
}
}
@keyframes slidedown {
from {
height: 0;
}
50% {
height: calc(var(--margin-high) + var(--cal-height));
}
to {
height: var(--cal-height);
margin-top: var(--margin-high);
}
}
@keyframes slidedownshort {
from {
height: 0;
}
50% {
height: calc(var(--margin-high) + var(--cal-height));
}
to {
height: calc(var(--cal-height) - var(--short-day));
margin-top: var(--margin-high);
}
}
@keyframes slideup {
from {
height: 0;
margin-top: 100vh;
}
50% {
height: calc(var(--margin-high) + var(--cal-height));
margin-top: var(--margin-high);
}
to {
height: var(--cal-height);
margin-top: var(--margin-high);
}
}
@keyframes slideupshort {
from {
height: 0;
margin-top: 100vh;
}
50% {
height: calc(var(--margin-high) + var(--cal-height));
margin-top: var(--margin-high);
}
to {
height: calc(var(--cal-height) - var(--short-day));
margin-top: var(--margin-high);
}
}
@keyframes sliderightshort {
from {
width: 0;
}
50% {
width: calc(var(--margin-wide) + var(--cal-width));
}
to {
width: calc(var(--cal-width) - var(--short-week));
margin-left: var(--margin-wide);
}
}
@keyframes dayfade {
from {
opacity: 0;
}
to {
opacity: 0.33;
}
}
@keyframes textfade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
background-color: var(--bg);
}
.weeks {
position: absolute;
top: calc(var(--margin-high) + 7px);
}
.week {
height: 7px;
width: 33vw;
margin-top: 52px;
background-color: var(--fg);
animation-duration: var(--first-stage);
animation-fill-mode: forwards;
}
.week-left {
animation-name: slideright;
}
.week-right {
animation-name: slideleft;
}
.week-right-short{
animation-name: sliderightshort;
}
.days {
margin-left: var(--margin-wide);
display: flex;
}
.day {
width: 7px;
margin-left: 52px;
background-color: var(--fg);
animation-duration: var(--first-stage);
animation-fill-mode: forwards;
}
.day-top {
animation-name: slidedown;
}
.day-top-short {
animation-name: slidedownshort;
}
.day-bottom {
animation-name: slideup;
}
.day-bottom-short {
animation-name: slideupshort;
}
.holiday {
animation-duration: var(--second-stage);
animation-delay: var(--first-stage);
animation-fill-mode: forwards;
animation-name: dayfade;
position: absolute;
width: 52px;
height: 52px;
background-color: var(--fg);
opacity: 0;
}
.text {
animation-name: textfade;
animation-duration: var(--second-stage);
animation-fill-mode: forwards;
animation-delay: var(--first-stage);
position: absolute;
font-family: Helvetica Neue;
font-size: var(--font-size);
font-weight: 300;
opacity: 0;
color: var(--fg);
}
</style>
<div class="days">
<div class="day day-top" style="margin-left: 0;"></div>
<div class="day day-bottom"></div>
<div class="day day-top"></div>
<div class="day day-bottom"></div>
<div class="day day-top-short"></div>
<div class="day day-bottom-short"></div>
<div class="day day-top-short"></div>
<div class="day day-bottom-short"></div>
</div>
<div class="text" style="top: calc(var(--margin-high) - var(--font-size)); left: calc(var(--margin-wide) + 20px);">ALTERNATE</div>
<div class="holiday" style="top: calc(var(--margin-high) + 14px); left: calc(var(--margin-wide) + 15px);"></div>
<div class="holiday" style="top: calc(var(--margin-high) + 73px); right: calc(var(--margin-wide) - 3px);"></div>
<div class="holiday" style="top: calc(var(--margin-high) + 132px); left: calc(var(--margin-wide) + 15px);"></div>
<div class="holiday" style="top: calc(var(--margin-high) + 191px); right: calc(var(--margin-wide) - 3px);"></div>
<div class="holiday" style="top: calc(var(--margin-high) + 250px); left: calc(var(--margin-wide) + 15px);"></div>
<div class="weeks">
<div class="week week-left" style="margin-top: 0;"></div>
<div class="week week-right"></div>
<div class="week week-left"></div>
<div class="week week-right"></div>
<div class="week week-left"></div>
<div class="week week-right-short"></div>
</div>
<div class="text" style="top: calc(var(--margin-high) + var(--cal-height) + 3px); left: calc(var(--margin-wide) + 8px);">WEEKENDS</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment