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); }
No comments:
Post a Comment