madstudios logo test

by Vince

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<h1>Mad Studios Logo Test</h1>
<header>
    <a href="#">
        <svg id="logo" width="358px" height="284px" viewBox="0 0 358 284" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
            <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
            <title>ms-logo</title>
            <desc>Created with Sketch.</desc>
            <defs></defs>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                <g id="madlogo" transform="translate(-21.000000, -58.000000)">
                    <g id="ms-logo" transform="translate(21.000000, 58.000000)">
                        <g id="arrows" fill="#FFFFFF" sketch:type="MSShapeGroup">
                            <path d="M59.3,0.1 L19.5,0.1 L17.3,0.1 C7.8,0.1 -3.55271368e-15,7.8 -3.55271368e-15,17.4 L-3.55271368e-15,19.6 L-3.55271368e-15,59.4 L19.5,59.4 L19.5,19.6 L59.3,19.6 L59.3,0.1 L59.3,0.1 Z" id="tl"></path>
                            <path d="M0,224.6 L0,264.4 L0,268 C0,276.8 7.1,283.9 15.9,283.9 L19.5,283.9 L59.3,283.9 L59.3,264.4 L19.5,264.4 L19.5,224.6 L0,224.6 L0,224.6 Z" id="bl"></path>
                            <path d="M298.7,283.9 L338.5,283.9 L342.6,283.9 C351.1,283.9 358,277 358,268.5 L358,264.4 L358,224.6 L338.5,224.6 L338.5,264.4 L298.7,264.4 L298.7,283.9 L298.7,283.9 Z" id="br"></path>
                            <path d="M358,59.4 L358,19.6 L358,15.5 C358,7 351.1,0.1 342.6,0.1 L338.5,0.1 L298.7,0.1 L298.7,19.6 L338.5,19.6 L338.5,59.4 L358,59.4 L358,59.4 Z" id="tr"></path>
                        </g>
                        <g id="text" transform="translate(28.000000, 61.000000)" fill="#5C5C60" sketch:type="MSShapeGroup">
                            <g id="Group">
                                <path d="M12.8,32.7...

CSS

header {
    background-color: #FACD50;
}

#logo {
    display: block;
    margin: auto;
}
#arrows {
	position: relative;
}
#logo #text {
	/* position: absolute;
	transform-origin: center center;
	transform: translate(0px, 0px) scale(1);
	transition: all 0.1s; */
}
#tl, #tr, #br, #bl {
	position: relative;
	transform-origin: center center;
	transform: translate(0px, 0px) scale(1);
	transition: all 0.1s;
}
/* #logo:hover #text {transform: translate(0px, 0px) scale(0.8);} */
#logo:hover #tl {transform: translate(10px, 10px) scale(0.9);}
#logo:hover #tr {transform: translate(-10px, 10px) scale(0.9);}
#logo:hover #bl {transform: translate(10px, -10px) scale(0.9);}
#logo:hover #br {transform: translate(-10px, -10px) scale(0.9);}
@keyframes spin {
	from {
		transform: translate(0px, 0px);
	}
	to {
		transform: translate(10px, 10px);
	}
}

JavaScript

var logo = {
    text: {
        target: document.getElementById('text'),
        animate: {
			from: {},
			to: {
				rotate: 360
			}
		},
		duration: 0.4
    },
    corners: {
        tl: {
            target: 'tl',
            animate: {
                from: {},
                to: {
					
				}
            },
			duration: 0.5
        },
        tr: {
            target: '',
            animate: {
                from: {},
                to: {}
            },
			duration: 0.5
        },
        br: {
            target: '',
            animate: {
                from: {},
                to: {}
            },
			duration: 0.5
        },
        bl: {
            target: '',
            animate: {
                from: {},
                to: {}
            },
			duration: 0.5
        }
    }
};
// TweenMax.to(logo.corners.tl.target, logo.corners.tl.duration, logo.corners.tl.animate.to);
TweenMax.to(logo.text.target, logo.text.duration, logo.text.animate.to);
$(function () {
	function logoOver () {
		//TweenMax.to(logo.corners.lt.target, logo.corners.lt.duration, logo.corners.lt.animate.to);
	}
	function logoOut () {
	
	}
	$('#logo').hover(logoOver, logoOut);
});