Imagine Logo animation

HTML
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve"> <rect id="I" x="33" y="19.2" class="st0" width="16" height="105.6"/> <polygon id="m1" class="st1" points="62,125 77,19.2 119,125 "/> <polygon id="m2" class="st2" points="77,125 119,19.2 133,125 "/> <polygon id="a" class="st3" points="138.7,125 163.8,16.5 189,125 "/> <rect id="I2" x="275.7" y="17.8" class="st4" width="16" height="108"/> <path id="c" class="st5" d="M227.5,124.5l-8-3c-49-18.3-48.5-81.9,0.8-99.4l8.1-2.9L227.5,124.5z"/> <path id="c3" class="st6" d="M271,95l-2.2,5.4c-13.6,32.9-59.8,32.1-72.3-1.2l-2-5.5L271,95z"/> <ellipse id="c2" class="st5" cx="251.1" cy="78.2" rx="13.9" ry="15.1"/> <polygon id="n1" class="st7" points="362.9,124.3 302.7,124.5 304.1,16 "/> <rect id="n2" x="335.3" y="15.8" class="st8" width="27.4" height="108.5"/> <rect id="e1" x="370.3" y="16" class="st9" width="26.7" height="108"/> <rect id="e2" x="370.3" y="16.2" class="st10" width="62" height="30.7"/> <rect id="e2" x="370.3" y="52" class="st10" width="53.4" height="41.3"/> <rect id="e2" x="370.3" y="98" class="st10" width="62" height="26"/> </svg>
CSS
body { background-color: #f1f1f1; text-align: center; } svg { position:absolute; top:0%; left:10%; transform:scale(0.7); } .st0{fill:#1A237E;} .st1{fill:#AA00FF;} .st2{opacity:0.5;fill:#C51162;} .st3{fill:#1B5E20;} .st4{fill:#01579B;} .st5{fill:#B71C1C;} .st6{opacity:0.7;fill:#FFF71A;} .st7{fill:#E64A19;} .st8{opacity:0.7;fill:#010101;} .st9{opacity:0.7;fill:#388E3C;} .st10{fill:#01579B;fill-opacity:0.7;}
JAVASCRIPT
$(window).load(function(){ var it=new TimelineMax({repeat:-1}); var mt=new TimelineMax({repeat:-1}); var mt2=new TimelineMax({repeat:-1}); var at=new TimelineMax({repeat:-1}); var it2=new TimelineMax({repeat:-1}); var ct=new TimelineMax({repeat:-1}); var ct2=new TimelineMax({repeat:-1}); var ot=new TimelineMax({repeat:-1}); var nt1=new TimelineMax({repeat:-1}); var nt2=new TimelineMax({repeat:-1}); var et1=new TimelineMax({repeat:-1}); it .to("#I", 0.63, {scaleY: 0, transformOrigin:'50% 50%', ease: Power2.easeOut}, 0.33) .to("#I", 1.63, {scaleY: 1, transformOrigin:'50% 50%', ease: Power2.easeOut}) mt .set('#m1', {scale: 0.1, transformOrigin: 'center top'}) .fromTo('#m1', 1, {y: -20}, {y: 0}) .to('#m1', 1.56, {scaleY: 1}) .to('#m1', 1.56, {scaleX: 1}) .to('#m1', 0.43, {scaleX: 0.1, delay: 1.4}) .to('#m1', 0.93, {scaleY: 0.1, y: -20}); mt2 .set('#m2', {scale: 0.1, transformOrigin: 'center top'}) .fromTo('#m2', 1, {y: -20}, {y: 0}) .to('#m2', 1.56, {scaleY: 1}) .to('#m2', 1.56, {scaleX: 1}) .to('#m2', 0.43, {scaleX: 0.1, delay: 1.4}) .to('#m2', 0.93, {scaleY: 0.1, y: -20}); at .from('#a', 1.2, {scaleY: 0.1, scaleX: 1.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 0.3)}) .to('#a', 1.46, {scaleY: 0.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1), delay: 1}); it2 .from('#I2', 1.33, {scaleY:0.1, transformOrigin:'center top', ease: Elastic.easeOut.config(1, 0.4)}) .to('#I2',2,{scaleY:0.1, transformOrigin:'center top', ease: Elastic.easeInOut.config(1,1)}); ct .to('#c3', 0.5, {rotation: 35, transformOrigin: 'top left', ease: Power2.easeOut}, 0.7) .to('#c3', 1.33, {rotation: 0, transformOrigin: 'top left', ease: Elastic.easeOut.config(1, 0.5)}) ct2 .from('#c', 1.2, {scaleX: 0.1, scaleY: 1.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 0.3)}) .to('#c', 1.46, {scaleX: 0.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1), delay: 1}); ot .from("#c2", 0.51, {yPercent: 0}, 0.86) .to("#c2", 0.5, {yPercent: -150, }) .to("#c2", 0.66, {yPercent:0, scaleX: 1, ease: Power2.easeOut}); nt1 .fromTo('#n1', 2, {scaleY: 0.1, skewX: -21, transformOrigin: 'bottom'}, {scaleY: 1, skewX: 0, ease: Elastic.easeOut.config(1, 0.5)}, 0.33) .to('#n1',0.5,{scaleY: 0.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1), delay: 1}); nt2 .fromTo('#n2', 2, {scaleY: 0.1, skewX: -21, transformOrigin: 'bottom'}, {scaleY: 1, skewX: 0, ease: Elastic.easeOut.config(1, 0.5)},0.33) .to('#n2',0.5,{scaleY: 0.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1), delay: 1}); et1 .to(".st10", 2.33, {scaleX: 0, transformOrigin:'left top', ease: Power2.easeOut}, 0.33) .set(".st10",{xPercent:100}) .to(".st10", 2.33, {scaleX: 1, transformOrigin:'right top', ease: Power2.easeOut}) });
Expand for more options Login