Skip to content

Instantly share code, notes, and snippets.

@l1kw1d

l1kw1d/impossible-triangle-animation.markdown

Created September 15, 2017 07:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save l1kw1d/15424e48c6122543318b87f962e648db to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save l1kw1d/15424e48c6122543318b87f962e648db to your computer and use it in GitHub Desktop.
Download ZIP
Impossible triangle animation
Raw
impossible-triangle-animation.markdown
Raw
index.pug
mixin cube
.cube&attributes(attributes)
.face.x
.face.y
.face.z
.view
.part
.plane
- for (var i = 0; i < 8; i++)
+cube
.static
+cube
+cube
.part
.plane
- for (var i = 0; i < 8; i++)
+cube
.static
+cube
Raw
style.sass
$side: 50px
$step: 1.2em
$dur: 10s
$easing: cubic-bezier(0.65, 0.05, 0.36, 1) reverse
$scale: 1, 1, 1 // less than $step
@function getDelay ($duration, $frames, $i)
@return -$i / $frames * $duration
// don't touch this
$_cubes: 7
@mixin plane($w, $h)
width: $w
height: $h
transform-style: preserve-3d
@mixin cube($side)
transform-style: preserve-3d
font-size: $side
width: 1em
height: 1em
.face
position: absolute
transform-style: preserve-3d
width: 100%
height: 100%
&::after,
&::before
content: ''
display: block
position: absolute
width: 100%
height: 100%
//backface-visibility: hidden
&::before
transform: rotateY(180deg) translateZ(0.5em)
&::after
transform: translateZ(0.5em)
&.x
transform: rotateX(90deg)
&.y
transform: rotateY(90deg)
@mixin view($p)
position: absolute
top: 0
left: 0
right: 0
bottom: 0
perspective: $p
@mixin center
position: absolute
top: 0
left: 0
right: 0
bottom: 0
margin: auto
html, body
font-size: $side
background: #15172C
overflow: hidden
width: 100%
height: 100%
.view
@include view(0)
pointer-events: none
user-select: none
.cube
animation: $dur infinite $easing //paused
position: absolute
@include cube($side)
.x
&::after, &::before
background: #00A85B
.y
&::after, &::before
background: #006446
.z
&::after, &::before
background: #C5FF4F
.static .cube
animation-direction: normal
animation-play-state: paused
.part
height: 100%
width: 50%
overflow: hidden
position: absolute
.plane
@include plane(1em, 1em)
transform: rotateX(54.73561031724534deg) rotateZ(45deg) translate(-2 * $step, -$step) // Math.acos(1/Math.sqrt(3)) / Math.PI * 180
position: absolute
margin: auto
font-size: $side
top: 0
bottom: 0
&:nth-child(1)
left: 0%
.plane
right: -0.5em
.cube
animation-name: stepA
@for $i from 0 through $_cubes
&:nth-child(#{$i + 1})
animation-delay: getDelay($dur, $_cubes, $i)
.static .cube
&:nth-child(1)
animation-delay: getDelay($dur, $_cubes, 2)
&:nth-child(2)
animation-delay: getDelay($dur, $_cubes, 5)
&:nth-child(2)
left: 50%
.plane
left: -0.5em
.cube
animation-name: stepB
@for $i from 0 through $_cubes
&:nth-child(#{$i + 1})
animation-delay: getDelay($dur, $_cubes, $i)
.static .cube
animation-delay: getDelay($dur, $_cubes, 3)
@keyframes stepB
$x: 0
$y: 0
$z: 0
@for $i from 0 through $_cubes
#{$i / $_cubes * 100%}
transform: translate3d($x * $step, $y * $step, $z * $step) scale3d($scale)
@if $x < 3
$x: $x + 1
@else if $y < 3
$y: $y + 1
@else if $z < 3
$z: $z + 1
@keyframes stepA
$x: 0
$y: -2
$z: -3
@for $i from 0 through $_cubes
#{$i / $_cubes * 100%}
transform: translate3d($x * $step, $y * $step, $z * $step) scale3d($scale)
@if $y < 0
$y: $y + 1
@else if $z < 0
$z: $z + 1
@else if $x < 3
$x: $x + 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment