mattdanielbrown · June 8, 2024 01:03 · Jun 8, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,6 @@
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
diff --git a/script.coffeescript b/script.coffeescript
@@ -0,0 +1,8 @@
+# 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()
diff --git a/style.scss b/style.scss
@@ -0,0 +1,65 @@
+// 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;
+}
diff --git a/transition-delay-mixin.markdown b/transition-delay-mixin.markdown
@@ -0,0 +1,7 @@
+Transition Delay Mixin
+----------------------
+Quickly write delayed transitions.
+
+A [Pen](https://codepen.io/mattdanielbrown/pen/KKLvMEg) by [Matt Daniel Brown](https://codepen.io/mattdanielbrown) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/KKLvMEg).