Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

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

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

Additional Resources:

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

Topics covered:

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

A Pen by @keyframers on CodePen.

License.

<div class="loader">
<div class="loader-panel left"></div>
<div class="loader-panel right"></div>
<div class="loader-count"></div>
</div>
// 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);
});
});
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.