Quickly write delayed transitions.
A Pen by Matt Daniel Brown on CodePen.
Created
June 8, 2024 01:03
-
-
Save mattdanielbrown/161cbd13d082d01b25a83d7f5a3d662b to your computer and use it in GitHub Desktop.
Transition Delay Mixin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # applying and removing classes for demo | |
| # you'll normally be doing interactive stuff like this with this mixin | |
| toggle = -> | |
| document.body.classList.toggle "active" | |
| setTimeout => | |
| toggle() | |
| , 1000 | |
| toggle() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // actual mixin | |
| @mixin stagger-delay( | |
| // delay between staggers, any time | |
| // unit is valid here | |
| $delay: 0.1s, | |
| // children you'd like to count up to | |
| $total: 1, | |
| // delay you'd like to start with | |
| $start: 0s, | |
| // any additional selectors you'd like | |
| // to use, in case you're targeting a child | |
| // of this nth element | |
| $selector: "", | |
| // nth kind you're targeting, | |
| // so: "of-type" or "child" | |
| $kind: "of-type" | |
| ){ | |
| $i: 0; | |
| @while $i < $total { | |
| &:nth-#{$kind}( #{$total}n+#{$i+1})#{$selector} { | |
| transition-delay: #{$start+($delay*$i)}; | |
| } | |
| $i: $i+1; | |
| } | |
| } | |
| // sample usage | |
| div { | |
| transition: transform 0.15s ease-in-out; | |
| transform: translate( 0 , 0% ); | |
| @include stagger-delay( 0.15s , 6 ); | |
| position: relative; | |
| width: 5vw; | |
| height: 5vw; | |
| background-color: red; | |
| display: inline-block; | |
| border-radius: 50%; | |
| margin: 1vw; | |
| } | |
| body.active { | |
| div { | |
| transform: translate( 0, 150% ); | |
| } | |
| } | |
| // some base page styling | |
| html , body { | |
| position: absolute; | |
| text-align: center; | |
| line-height: 100vh; | |
| overflow: hidden; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 0; | |
| left: 0; | |
| top: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment