The Tea Set recently released their latest album Back in Time for Tea, and I thought I'd have a play with one of their old logos. I spent ages working out the SCSS mixin, but I'm pleased with the result.
This is the mixin and its usage:
$main-duration: 10s;
$base-percentage: 3%;
@mixin animate_movement($initial, $id, $main-duration, $delay, $duration) {
$animation-name: unique-id() !global;
@keyframes #{$animation-name} {
0%,
#{$delay * $base-percentage} {
transform: $initial;
}
#{($delay + $duration) * $base-percentage},
100% {
transform: translate(0px, 0px);
}
}
##{$id} {
transform: $initial;
animation: $animation-name $main-duration linear infinite alternate;
}
}
@keyframes scale-in-top {
0% {
transform: scale(0);
transform-origin: 50% 0%;
opacity: 1;
}
100% {
transform: scale(3);
transform-origin: 50% 0%;
opacity: 1;
}
}
.icon-holder {
text-align: center;
margin-top: 1em;
svg {
animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@include animate_movement(translateY(-88px), TheTeaSet, $main-duration, 1, 5);
@include animate_movement(translateX(-16px), tHe, $main-duration, 9, 3);
@include animate_movement(translateX(-32px), thE, $main-duration, 6, 6);
@include animate_movement(translateX(-16px), tEa, $main-duration, 15, 3);
@include animate_movement(translateX(-32px), teA, $main-duration, 12, 6);
@include animate_movement(translateX(32px), Set, $main-duration, 18, 6);
@include animate_movement(translateX(16px), sEt, $main-duration, 21, 3);
}
Top comments (0)