Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Apple TV Macbeth Poster Animation

Apple TV Macbeth Poster Animation

Source of inspiration by Konstantine Trundayev - https://dribbble.com/shots/2245238-Apple-TV-Macbeth-poster

Not working in IE 11-. Shiny effect really sucks compared to original gif, I killed more than 1 hour on gradients and box-shadows, all of them looks not good enough :(

"360 degree rotation of already rotatated element" it is kinda tricky part. It's easy to imagine in your brain how this animation should work, but actually it's not that straightforward. I tried keyframes with steps like rotateX(10deg)>rotateY(10deg)>rotateX(-10deg)>rotateY(-10deg) but animation was absolutely different, because it wasn't actually rotating around Z axis. Then I tried double 360deg-Zrotation (normal for inner element and reversed for parent, to keep element not actually rotated) but for some reason any rotation for second block above 179deg was not working. So I ended up doing this hacky part with #{percentage(179/360)} {rotate: 179deg} > 50% {rotate: 180deg} > 100% {rotate: 360deg} and that trick worked!

A Pen by Nikolay Talanov on CodePen.

License.

<div class="demo">
<div class="demo__content">
<div class="demo__img"></div>
</div>
</div>
<a class="source" href="https://dribbble.com/shots/2245238-Apple-TV-Macbeth-poster" target="_blank">Source of inspiration</a>
<p class="tip">Reload, if the position is incorrect.</p>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
font-size: 62.5%;
@media (max-width: 900px) {
font-size: 50%;
}
}
body {
overflow: hidden;
background: linear-gradient(#F7F7FF, #BDD6DD);
}
$w: 40.5rem;
$h: 60rem;
$imgW: 41.6rem;
$imgH: 53.7rem;
$animTime: 2s;
.demo {
position: absolute;
left: 50%;
top: 50%;
width: $w;
height: $h;
margin-left: $w/-2;
margin-top: $h/-2;
perspective: 1000px;
transform-style: preserve-3d;
animation: rotateReverse $animTime infinite linear;
&__content {
position: relative;
height: 100%;
transform-style: preserve-3d;
animation: rotate $animTime infinite linear;
transform: rotateX(10deg);
background: #fff;
&:before {
content: "";
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0 5rem 10rem rgba(0,0,0,0.4);
}
}
&__img {
overflow: hidden;
position: absolute;
left: ($w - $imgW)/2;
top: ($h - $imgH)/2;
width: $imgW;
height: $imgH;
transform: translateZ(5rem) scale(0.95);
&:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('http://i.imgur.com/X6YTEYZ.png');
background-size: cover;
}
&:after {
content: "";
z-index: 2;
overflow: hidden;
position: absolute;
left: -20%;
top: 0;
width: 80%;
padding-bottom: 80%;
border-radius: 50%;
background: radial-gradient(ellipse farthest-corner at center, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 100%);
transform: translateY(-100%);
animation: shiny $animTime infinite ease-in-out;
}
}
}
@keyframes rotate {
#{percentage(179/360)} {
transform: rotateX(10deg) rotateZ(179deg);
}
50% {
transform: rotateX(10deg) rotateZ(180deg);
}
100% {
transform: rotateX(10deg) rotateZ(360deg);
}
}
@keyframes rotateReverse {
#{percentage(179/360)} {
transform: rotateZ(-179deg);
}
50% {
transform: rotateZ(-180deg);
}
100% {
transform: rotateZ(-360deg);
}
}
@keyframes shiny {
25% {
transform: translateY(-100%);
}
50% {
transform: translateY($h);
}
50.1% {
transform: translate(75%, $h);
}
75% {
transform: translate(75%, -100%);
}
}
.source {
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
font-size: 2rem;
}
.tip {
padding: 1rem;
font-size: 1.8rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment