andersdn · April 27, 2017 16:09 · Apr 27, 2017
diff --git a/flippin-bars-with-css-variables-webkit-only.markdown b/flippin-bars-with-css-variables-webkit-only.markdown
@@ -0,0 +1,23 @@
+flippin' bars with CSS variables (WebKit only)
+----------------------------------------------
+[Watch me code this in9 minutes](https://www.youtube.com/watch?v=https://youtu.be/HbjYHrWHNMI) (you can also speed it up if you feel I'm typing/ speaking too slow). WebKit only! Firefox and Edge don't support `calc()` as an `animation-delay` value and Firefox doesn't support `calc()` in `rgb()` either. If you like this demo in particular and my demos in general, please consider one of the following:
+
+* getting me something from [my Amazon WishList](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/)
+
+* or this [t-shirt](http://merchdome.com/ACCEPT-Girlieshirt-Restless-and-Wild-Since-1982_1)  (size S) that I couldn't find on Amazon, but I absolutely love
+
+* or at least supportting the implementation of the cool features showcased here:   using `calc()` for any values, not just lengths -  bugs [956573](https://bugzilla.mozilla.org/show_bug.cgi?id=956573), [984021](https://bugzilla.mozilla.org/show_bug.cgi?id=984021), [1264520](https://bugzilla.mozilla.org/show_bug.cgi?id=1264520) and [1296209](https://bugzilla.mozilla.org/show_bug.cgi?id=1296209) for Firefox, issue [#653501](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/653501/) for Edge
+
+* oh, also, why not share this to show the rest of the world what can be done on the web these days?
+
+Thank you!
+
+---
+
+Inspired by this [Geometric Animations gif](http://geometricanimations.tumblr.com/post/156156936168/flipped).
+
+![original gif image](http://68.media.tumblr.com/be7486c62e7e041906238965c82155f1/tumblr_ok49hmGhmb1u8f46ro1_500.gif)
+
+A [Pen](http://codepen.io/thebabydino/pen/RVKyNL) by [Ana Tudor](http://codepen.io/thebabydino) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/thebabydino/pen/RVKyNL/license).
diff --git a/index.haml b/index.haml
@@ -0,0 +1,2 @@
+- 12.times do
+	.bar
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://codepen.io/thebabydino/pen/evPbxv.js"></script>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,35 @@
+$n: 12;
+$t: 3.62s;
+$r0: 11;
+$r1: 255;
+$w: .75em;
+$h: 4.5em;
+$k: .06;
+
+.bar {
+	--i: 0;
+	position: absolute;
+	top: 50%;
+	left: calc(50% + (var(--i) - #{.5*($n - 1)})*#{2*$w});
+	animation: flip0 $t linear infinite;
+
+	@for $i from 1 to $n { &:nth-child(#{$i + 1}) { --i: $i } }
+
+	&:before {
+		position: absolute;
+		margin: -.5*$h (-.5*$w);
+		width: $w; height: $h;
+		border-radius: 3px;
+		box-shadow: 0 0 0 $w/3 #fff;
+		background: rgb(calc(#{$r0} + var(--i)*#{round(($r1 - $r0)/$n)}), 50, 100);
+		animation: flip1 $t ease-in-out calc(var(--i)*#{-$k*$t/$n}) infinite;
+		content: '';
+	}
+}
+
+@keyframes flip0 { to { transform: rotate(.5turn) } }
+
+@keyframes flip1 {
+	0%, 50% { transform: none }
+	#{50% + $k*100%}, to { transform: rotate(.5turn) }
+}
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://codepen.io/thebabydino/pen/evPbxv.scss" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://codepen.io/thebabydino/pen/evPbxv.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://codepen.io/thebabydino/pen/evPbxv.scss" rel="stylesheet" />