Blurred Blinds | Loader Animation Tutorial with backdrop-filter: blur | @keyframers 2.13.0

blurred-blinds-loader-animation-tutorial-with-backdrop-filter-blur-keyframers-2-13-0.markdown

Blurred Blinds | Loader Animation Tutorial with backdrop-filter: blur | @keyframers 2.13.0

David Khourshid and Stephen Shaw work with the hot-off-the-press backdrop-filter support in Chrome to create a blinds-like loader effect

• ⏰ Streamed live on 2019 at https://twitch.tv/keyframers
• 💡 Inspiration: https://dribbble.com/shots/6855577-Clean-motion-design-language
• 📺 Video: https://youtu.be/dbWFK32qhAU
• 💻 Code: https://cdpn.io/pen/

Skip around: 3:00 Animation overview 10:00 Start coding 1:40:00 Keyflections

Additional Resources:

• https://twitter.com/williambout/status/1156319009710542848
• Backdrop Filter https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

• Like & subscribe on YouTube at https://youtube.com/keyframers
• Follow & tweet us at https://twitter.com/keyframers.
• Join the live streams & subscribe on Twitch http://twitch.tv/keyframers
• Support us on Patreon at https://patreon.com/keyframers

Topics covered:

• Backdrop-Filter Blur
• CSS Variables
• Loader animations
• Counter animations

A Pen by @keyframers on CodePen.

License.

index.html

<div class="loader">
  <div class="loader-panel left"></div>
  <div class="loader-panel right"></div>
  <div class="loader-count"></div>
</div>

script.js

// NO

// Just for replaying, okay?
var s = document.createElement('style');
s.innerHTML = " *, *:before, *:after { animation: none !important; }";

document.addEventListener('click',function(){
  document.head.appendChild(s);
  setTimeout(function(){
    document.head.removeChild(s);
  });
});

style.scss

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200&display=swap');

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

html, body { 
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Titillium Web', sans-serif;
  color: white;
}

:root {
  --font-size: 35vmin;
  --easing: cubic-bezier(.5, 0, .5, 1);
  --duration: 1s;
  --delay: 1s;
  --count-duration: 6s;
  --count-delay: 2.5s;
}
// =============================

.loader {
  background: url('https://images.unsplash.com/photo-1466951561471-9a9a7b99cd77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1496&q=80');
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}


.loader-count {
  height: var(--font-size);
  width: calc(var(--font-size) * 2);
  text-align: center;
  overflow: hidden;
  animation: fade-in var(--duration) var(--count-delay) linear both;

  &:before, &:after {
    position: absolute;
    display: block;
    font-size: var(--font-size);
    line-height: 1;
    width: var(--font-size);
    animation: count-up var(--count-duration) var(--count-delay) var(--easing) both;
    
    
    @keyframes fade-in {
      0%, 50% { opacity: 0;}
      100% { opacity: 1; }
    }
  }
  
  &:before {
    content: '0 1';
    left: 0;
    animation-name: count-up-tens;
    
    @keyframes count-up-tens {
      from, 50% {
        transform: none;
      }
      to {
        transform: 
          translateY(
            calc(-100% + 1em)
          );
      }
    }

  }
  
  &:after {
    content: '0 1 2 3 4 5 6 7 8 9 0';
    right: 0;
    animation-name: count-up;
    
    @keyframes count-up {
      to {
        transform: 
          translateY(
            calc(-100% + var(--font-size))
          );
      }
    }
  }
}


/* ---------------------------------- */

.loader-panel {
  flex: 1 1 auto;
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  
  background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  
  animation: slide-in var(--duration) var(--delay) both ease-out;
  
  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: inherit;
    background: inherit;
    animation: inherit;
    transform: inherit;
    box-sizing: content-box;
    animation: slide-in var(--duration) both var(--easing);
    animation-name: inherit;
  }
  
  &::before {
    animation-delay: 
      calc( var(--delay) * 1.5);
  }
  
  &::after {
    animation-delay: 
      calc( var(--delay) * 2 );
  }
  
  
  @keyframes slide-in-from-left {
    from { transform: translateX(-100%); }
  }
  
  @keyframes slide-in-from-right {
    from {
      transform: translateX(100%);
    }
  }
  
  &.left { 
    animation-name: slide-in-from-left;
    border-right: solid 2px;
    left: 0;
  }
  &.right { 
    animation-name: slide-in-from-right;
    border-left: solid 2px;
    right: 0;
  }
}