The Tea Set

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);
}