Untitled

<!DOCTYPE html>
html(lang="en")
head
    meta(charset="UTF-8")
    title Document
    link(rel="stylesheet", href="style/style.css")
body
#box
    .box
        .box__bottom.js__bottom
        .box__top.js__top
        .box__left.js__left
        .box__right.js__right
        .box__back.js__back
        .box__front.js__front

body
    background-color: #222
    color: #FFF
    display: flex
    justify-content: center

#box
    width: 100px
    margin: 50px
    pointer-events: none

.box
    width: 100px
    height: 100px
    margin: 30px auto
    position: relative
    div
        position: absolute
        text-align: center
        left: 0
        top: 0
        line-height: 100px
        font-weight: bold
        font-size: 40px
        width: 100px
        height: 100px
        color: #111
    &__front
        background-color: black

    &__back
        background-color: red

    &__right
        background-color: blue

    &__left
        background-color: yellow

var dur = 6,
    e = Linear.easeNone,
    tlMaster = new TimelineMax({paused:true});

TweenMax.set(".box", {
    transformStyle: "preserve-3d"
});
TweenMax.set(".box > div", {
    transformStyle: "preserve-3d",
    transformOrigin: "50% 50% -50px",
    transformPerspective: 1000
});
TweenMax.set(".js__back", {
    rotationY: 270
});
TweenMax.set(".js__right", {
    rotationY: 180
});
TweenMax.set(".js__left", {
    rotationY: 90
});
TweenMax.set(".js__top", {
    rotationX: 90
});
TweenMax.set(".js__bottom", {
    rotationX: 270
});

function facesInner(){

  var tlFacesInner = new TimelineMax({
    repeat: -1
  });
  tlFacesInner
    .to(".js__front", dur, {
        rotationY: '+=360',
        ease: e
    }, 0)
    .to(".js__back", dur, {
        rotationY: '+=360',
        ease: e
    }, 0)
    .to(".js__top", dur, {
        rotationY: '+=360',
        ease: e
    }, 0)
    .to(".js__bottom", dur, {
        rotationY: '+=360',
        ease: e
    }, 0)
    .to(".js__left", dur, {
        rotationY: '+=360',
        ease: e
    }, 0)
    .to(".js__right", dur, {
        rotationY: '+=360',
        ease: e
    }, 0);

  return tlFacesInner;
}

function faces(){

  var tlFaces = new TimelineMax({
    repeat: -1
  });
  tlFaces
  return tlFaces;
}

window.requestAnimationFrame(function(){

  tlMaster
    .add(facesInner(), 0)
    .add(faces(), 0)
    .progress(1).progress(0)
    .play();

});