gameboy animation

gameboy redesigne add with GSAP + pure css image. transform the vintage gameboy to a new concept. * inspirated by: http://www.fubiz.net/en/2015/11/23/game-boy-concept-with-vintage-elements/ *

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/plugins/CSSRulePlugin.min.js"></script>
<div class="container">
    <div class="gameboy">
        <div class="lcd">
            <span>Press any button to start.</span>
        </div>
        <div class="crossbutton btn"></div>
        <div class="ovalbutton two btn"></div>
        <div class="ovalbutton btn"></div>
        <div class="ricebutton btn"></div>
        <div class="ricebutton two btn"></div>
        <div class="speaker">
            <div class=""></div>
            <div class=""></div>
            <div class=""></div>
            <div class=""></div>
            <div class=""></div>
            <div class=""></div>
        </div>
    </div>
    
</div>

CSS

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.container{
    background-color: #E0E0E0;
    width: 100%;
    height: 100%;
    position: relative;
}
.gameboy{ 
    width: 168px;
    height: 272px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -100px;
    background-color: #F0F0EC;
    border: 2px solid #60605F;
    border-radius: 10px;
    border-bottom-right-radius: 40px;
}
.lcd{
    width: 138px;
    height: 104px;
    position: absolute;
    top: 25px;
    left: 15px;
    background-color: #706F6F;
    border-radius: 5px;
    border-bottom-right-radius: 25px;
}
.lcd:before{
    width: 87px;
    height: 80px;
    position: absolute;
    top: 12px;
    left: 26px;
    background-color: #E3A043;
    border-radius: 1px;
    display: block;
    content: " ";
    z-index: 2;
}
.lcd:after{
    position: absolute;
    top: 30px;
    left: 8px;
    height: 5px;
    width: 5px;
    background-color: #BF0E1A;
    border-radius: 100%;
    display: block;
    content: " ";
}
.lcd span{
    position: absolute;
    z-index: 3;
    width: 87px;
    height: 80px;
    top: 12px;
    left: 26px;
    font-family: monospace;
    text-shadow: 1px 1px #FFFFFF;
}
.crossbutton{
    height: 43px;
    width: 13px;
    background-color: #3C3C3A;
    border-radius: 4px;
    position: absolute;
    top: 160px;
    left: 30px;
}
.crossbutton:after{
    height: 13px;
    width: 43px; 
    background-color: #3C3C3A;
    border-radius: 4px;
    position: absolute;
    top: 15px;
    left: -15px;
    display: block;
    content: "";
}
.ovalbutton{
    width: 53px;
    height: 22px;
    background-color: #9D9D9D;
    border-radius: 30px;
    position: absolute;
    top: 165px;
    left: 100px;
    transform: rotate(-20deg);
}
.ovalbutton:before, .ovalbutton:after{
    height: 16px;
    width: 16px;
    background-color: #BF1622;
    border-radius: 100%;
    position: absolute;
    top: 3px;
    right: 3px;
    display: block;
   ...

JavaScript

var tl = new TimelineMax({repeat:-1}),
    lcdIn = CSSRulePlugin.getRule(".lcd:before"),
    lcdLed = CSSRulePlugin.getRule(".lcd:after");

function TextSlide()
{
    tl.to(".lcd span", 1, {
          textShadow: 0,
    });
}

TextSlide();

$(".btn").click(function() {    
tl.pause();

/*turn off the gameboy*/
TweenMax.to(lcdLed, 0.1, {cssRule:{ 
    	backgroundColor:"#4B4B4B",
	},
    	delay: 0.8,
	});
TweenMax.to(lcdIn, 0.1, {cssRule:{ 
    	backgroundColor:"#4679BD",
	},
    	delay: 0.96,
	});
TweenMax.to(lcdIn, 0.06, {cssRule:{ 
    	backgroundColor:"#000000",
	},
    	delay: 1,
	});
/*spin the buttons*/
TweenMax.to(".btn",1,{
    	rotation:"-720",
    	delay: 1.5
	});
TweenMax.to(".btn",0.5,{
    	rotation:"-740",
    	delay: 2.5
	});
TweenMax.to(".crossbutton",1,{
    	rotation:"-720",
    	delay: 2.5
	});
/*move the buttons*/
TweenMax.to(".crossbutton",2,{
    	top: '40px',
    	left: '25px',
    	delay: 2
	});
TweenMax.to(".ovalbutton",2,{
    	top: '38px',
    	left: '285px',
    	delay: 2
	});
TweenMax.to(".ricebutton",2,{
    	top: '100px',
    	left: '285px',
    	delay: 2
	});
TweenMax.to(".ricebutton.two",2,{
    	top: '110px',
    	left: '285px',
    	delay: 2
	});
/*show the second ovalbutton*/
TweenMax.to(".ovalbutton.two",0.5,{
    	opacity: 1,
    	top: '68px',
    	delay: 4
	});
/*set the gameboy's new sizes*/
TweenMax.to(".gameboy",2,{
    	width: '344px',
    	height: '176px',
    	margin: '-88px 0 0 -172px',
    	delay: 1.8
	});
/*set the lcd's new size and poition*/
TweenMax.to(".lcd",2,{
    	width: '220px',
    	height: '128px',
    	top: '14px',
    	left: '60px',
    	delay: 1.8
	});
TweenMax.to(lcdIn, 2, {cssRule:{ 
    	width: '194px',
    	height: '108px',
    	top: '10px',
    	left: '13px',
	},
    	delay: 1.8,                
    });
TweenMax.to(lcdLed, 2, {cssRule:{ 
    	top: '48px',
    	left: '5px',
	},
    	delay: 1.8,                
    });
/*

TweenMax.to(lcdIn, 0.3, {cssRule:{ 
    	opacity: 1,
   ...