<div id="brand">
<div class="billy">
<img src="https://assets.codepen.io/102870/BillywLogo.svg" />
</div>
<div class="billyani">
<svg id="billyani" xmlns="http://www.w3.org/2000/svg" width="564" height="425" viewBox="0 0 564 425">
<defs>
</defs>
<title>ikeashelves2</title>
<g id="bottom">
<path class="cls-1" d="M195.89,464.64,629.12,339.93,520.75,323.64,68,447.06l90.82,21.7C171,461.23,181.5,460.73,195.89,464.64Z" transform="translate(-66.3 -44)"/>
<path class="cls-2" d="M195.89,454.75,629.12,330,520.75,313.74,68,437.17l90.82,21.7C171,451.34,181.5,450.84,195.89,454.75Z" transform="translate(-66.3 -44)"/>
<polygon class="cls-3" points="92.47 424.76 1.65 403.67 1.65 393.16 92.47 414.26 92.47 424.76"/>
<polygon class="cls-4" points="562.96 296.45 129.59 420.64 129.59 410.13 562.96 285.95 562.96 296.45"/>
<ellipse class="cls-5" cx="340.76" cy="306.26" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="351.84" cy="303.21" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="362.93" cy="300.15" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="374.01" cy="297.1" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="385.09" cy="294.04" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="396.17" cy="290.99" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="407.26" cy="287.93" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="418.34" cy="284.88" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="429.42" cy="281.82" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="224.45" cy="339.01" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="235.53" cy="335.96" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="246.61" cy="332.9" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="257.7" cy="329.85" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="268.78" cy="326.79" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="279.86" cy="323.74" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="290.94" cy="320.68" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="302.03" cy="317.63" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="313.11" cy="314.57" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="103.4" cy="372.2" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="114.48" cy="369.14" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="125.56" cy="366.09" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="136.64" cy="363.03" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="147.73" cy="359.98" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="158.81" cy="356.92" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="169.89" cy="353.87" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="180.97" cy="350.81" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="192.06" cy="347.76" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="424.72" cy="319.33" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="435.8" cy="316.28" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="446.88" cy="313.22" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="457.97" cy="310.17" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="469.05" cy="307.11" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="480.13" cy="304.06" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="491.21" cy="301" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="502.29" cy="297.95" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="513.38" cy="294.89" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="308.41" cy="352.08" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="319.49" cy="349.02" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="330.57" cy="345.97" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="341.65" cy="342.91" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="352.74" cy="339.86" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="363.82" cy="336.8" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="374.9" cy="333.75" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="385.98" cy="330.69" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="397.06" cy="327.64" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="187.35" cy="385.26" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="198.44" cy="382.21" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="209.52" cy="379.16" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="220.6" cy="376.1" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="231.68" cy="373.05" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="242.76" cy="369.99" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="253.85" cy="366.94" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="264.93" cy="363.88" rx="2.9" ry="0.85"/>
<ellipse class="cls-5" cx="276.01" cy="360.83" rx="2.9" ry="0.85"/>
</g>
<g id="wholeShelf2">
<g id="shelf2">
<polygon class="cls-6" points="357.78 319.76 264.62 302.76 264.62 126.83 357.78 143.83 357.78 319.76"/>
<polygon class="cls-7" points="365.2 316.51 357.9 319.57 357.78 143.83 365.2 140.26 365.2 316.51"/>
<polygon class="cls-7" points="365.2 140.26 357.78 143.83 264.62 126.83 272.55 123.38 365.2 140.26"/>
<ellipse class="cls-5" cx="353.85" cy="140.72" rx="1.92" ry="0.91"/>
<ellipse class="cls-5" cx="276.34" cy="126.28" rx="1.92" ry="0.91"/>
</g>
<path id="frontPeg-2" data-name="frontPeg" class="cls-8" d="M422,172.65c0-.6-.86-1.1-1.92-1.1s-1.92.49-1.92,1.1v11.73h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="backPeg-2" data-name="backPeg" class="cls-8" d="M344.39,158.36c0-.6-.86-1.1-1.92-1.1s-1.92.49-1.92,1.1v11.73h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="botFrontPeg-2" data-name="BotFrontPeg" class="cls-8" d="M421.28,363.67c0-.6-.86-1.1-1.92-1.1s-1.92-.41-1.92.2V374.5h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="botBackPeg-2" data-name="botBackPeg" class="cls-8" d="M336.74,348.24c0-.6-.86-1.06-1.92-1.06s-1.92-.45-1.92.16V360h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
</g>
<g id="wholeShelf3">
<g id="shelf3">
<polygon class="cls-6" points="191.7 363.24 98.54 346.24 98.54 170.3 191.7 187.3 191.7 363.24"/>
<polygon class="cls-7" points="199.12 359.67 191.82 362.74 191.7 187.3 199.12 183.74 199.12 359.67"/>
<polygon class="cls-7" points="199.12 183.74 191.7 187.3 98.54 170.3 106.47 166.85 199.12 183.74"/>
<ellipse class="cls-5" cx="187.77" cy="184.2" rx="1.92" ry="0.91"/>
<ellipse class="cls-5" cx="110.26" cy="169.75" rx="1.92" ry="0.91"/>
</g>
<path id="frontPeg-3" data-name="frontPeg" class="cls-8" d="M255.9,216.08c0-.6-.86-1.1-1.92-1.1s-1.92.49-1.92,1.1v11.73h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="backPeg-3" data-name="backPeg" class="cls-8" d="M178.44,201.66c0-.6-.86-1.1-1.92-1.1s-1.92.49-1.92,1.1v11.73h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="botFrontPeg-3" data-name="botFrontPeg" class="cls-8" d="M255.91,407.16c0-.6-.86-1.1-1.92-1.1s-1.92.49-1.92,1.1v11.73h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="botBackPeg-3" data-name="botBackPeg" class="cls-8" d="M171.58,392.29c0-.6-.86-1.1-1.92-1.1s-1.92-.41-1.92.2V404h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
</g>
<g id="wholeShelf1">
<g id="shelf1">
<polygon class="cls-6" points="517.88 274.15 424.72 257.15 424.72 81.21 517.88 98.21 517.88 274.15"/>
<polygon class="cls-7" points="525.3 270.58 518 273.65 517.88 98.21 525.3 94.65 525.3 270.58"/>
<polygon class="cls-7" points="525.3 94.65 517.88 98.21 424.72 81.21 432.65 77.76 525.3 94.65"/>
<ellipse class="cls-5" cx="514.85" cy="95.11" rx="1.92" ry="0.91"/>
<ellipse class="cls-5" cx="436.44" cy="80.66" rx="1.92" ry="0.91"/>
</g>
<path id="frontPeg" class="cls-8" d="M583,127.18c0-.6-.86-1.1-1.92-1.1s-1.92.49-1.92,1.1v11.73h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="backPeg" class="cls-8" d="M504.71,112.82c0-.6-.86-1.1-1.92-1.1s-1.92.49-1.92,1.1v11.73h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="botFrontPeg" class="cls-8" d="M582.27,318.62a1.9,1.9,0,0,0-1.92-1.45c-1.06,0-1.92-.05-1.92.55v12.63h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
<path id="botBackPeg" class="cls-8" d="M497.76,303.31a1.91,1.91,0,0,0-1.92-1.47c-1.06,0-1.92,0-1.92.57V315h0s0,0,0,.06c0,.6.86,1.1,1.92,1.1s1.92-.49,1.92-1.1c0,0,0,0,0-.06h0Z" transform="translate(-66.3 -44)"/>
</g>
<g id="topx">
<path class="cls-9" d="M195.89,195.31,629.12,70.6,520.75,54.31,68,177.73l90.82,21.7C171,191.9,181.5,191.4,195.89,195.31Z" transform="translate(-66.3 -44)"/>
<path class="cls-6" d="M195.89,185.42,629.12,60.7,520.75,44.41,68,167.84l90.82,21.7C171,182,181.5,181.51,195.89,185.42Z" transform="translate(-66.3 -44)"/>
<polygon class="cls-10" points="92.47 155.43 1.65 134.34 1.65 123.83 92.47 144.93 92.47 155.43"/>
<polygon class="cls-7" points="562.96 27.12 129.59 151.31 129.59 140.8 562.96 16.62 562.96 27.12"/>
</g>
</svg>
</div>
</div>
body {
text-align:center;
}
.rectbg {
fill:#fc0;
}
/* #brand, #billy {
float:left;
} */
#brand {
max-width: 900px;
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto;
margin: 0 auto;
}
.billy {
/* grid-row-start:2; */
/* grid-row-end: 3; */
padding: 24px;
}
.billyani {
}
.logo {
padding: 24px;
grid-row-start:1;
grid-row-end: 2;
}
.logo img {
max-height: 96px;
}
.cls-1, .cls-9 {
fill: #b6b6b6;
}
.cls-1, .cls-10, .cls-2, .cls-3, .cls-4, .cls-6, .cls-7, .cls-9 {
stroke: #6a6b6b;
stroke-width: 0.82px;
}
.cls-1, .cls-2, .cls-3, .cls-4 {
stroke-miterlimit: 10;
}
.cls-2, .cls-6 {
fill: #fff;
}
.cls-10, .cls-3 {
fill: #dadada;
}
.cls-4, .cls-7 {
fill: #f2f2f2;
}
.cls-5 {
fill: #1c1b1a;
}
.cls-10, .cls-6, .cls-7, .cls-9 {
stroke-linejoin: round;
}
.cls-8 {
fill: #6a6b6b;
}var billy = document.getElementById('billy')
bottom = document.getElementById('bottom')
topx = document.getElementById('topx')
wholeShelf1 = document.getElementById('wholeShelf1')
shelf1 = document.getElementById('shelf1')
botFrontPeg = document.getElementById('botFrontPeg')
botBackPeg = document.getElementById('botBackPeg')
frontPeg = document.getElementById('frontPeg')
backPeg = document.getElementById('backPeg')
wholeShelf2 = document.getElementById('wholeShelf2')
shelf2 = document.getElementById('shelf2')
botFrontPeg2 = document.getElementById('botFrontPeg-2')
botBackPeg2 = document.getElementById('botBackPeg-2')
frontPeg2 = document.getElementById('frontPeg-2')
backPeg2 = document.getElementById('backPeg-2')
wholeShelf3 = document.getElementById('wholeShelf3')
shelf3 = document.getElementById('shelf3')
botFrontPeg3 = document.getElementById('botFrontPeg-3')
botBackPeg3 = document.getElementById('botBackPeg-3')
frontPeg3 = document.getElementById('frontPeg-3')
backPeg3 = document.getElementById('backPeg-3')
tl = new TimelineMax()
tl.set([bottom, topx], {opacity:0})
// tl.set(frontPeg, {y:-28, x:-39})
// tl.set(backPeg, {y:-30, x:-40})
// tl.set(botFrontPeg, {y:-50, x:-40})
// tl.set(botBackPeg, {y:-52, x:-32})
// tl.set(topx, {opacity:0})
// .from(botFrontPeg,.25, {y:-500, ease:Power2.easeOut})
// .from(botBackPeg,.25, {y:-500, ease:Power2.easeOut})
.from(shelf1,.5, {y:-500, ease:Power2.easeOut})
.from(shelf2,.5, {y:-500, ease:Power2.easeOut})
.from(shelf3,.5, {y:-500, ease:Power2.easeOut})
.add("shelfzoom")
.to(wholeShelf1,.5, {scale:3, x:-220, y:0, ease:Power2.easeOut},"shelfzoom")
.to(wholeShelf2,.5, {opacity:.5, ease:Power2.easeOut},"shelfzoom")
.to(wholeShelf3,.5, {opacity:.5, ease:Power2.easeOut},"shelfzoom")
// .to(billy, 1.0, {attr: {viewBox: '384 0 209.17 157.51' }, ease:Linear.easeNone})
.from(frontPeg,.5, {y:-96, opacity:0, ease:Power2.easeOut})
.from(backPeg,.5, {y:-96, opacity:0, ease:Power2.easeOut})
.to(frontPeg,.5, {scaleY:.5, transformOrigin:"bottom center", ease:Power2.easeIn})
.to(backPeg,.5, {scaleY:.5, transformOrigin:"bottom center", ease:Power2.easeIn})
.to(wholeShelf1,.5, {scale:1, x:0, y:0, ease:Power2.easeOut})
.to(wholeShelf2,.5, {opacity:1, ease:Power2.easeOut})
.to(wholeShelf3,.5, {opacity:1, ease:Power2.easeOut})
// .addPause()
// .to(billy, 1.0, {attr: {viewBox: '0 0 564 425' }, ease:Linear.easeNone})
.from(botFrontPeg,.25, {y:500, ease:Power2.easeOut})
.to(botFrontPeg,.25, {scaleY:.5, transformOrigin:"top center", ease:Power2.easeIn})
.from(botBackPeg,.25, {y:500, ease:Power2.easeOut})
.to(botBackPeg,.25, {scaleY:.5, transformOrigin:"top center", ease:Power2.easeIn})
.from(frontPeg2,.25, {y:-500, ease:Power2.easeOut})
.to(frontPeg2,.25, {scaleY:.5, transformOrigin:"bottom center", ease:Power2.easeIn})
.from(backPeg2,.25, {y:-500, ease:Power2.easeOut},"-=.5")
.to(backPeg2,.25, {scaleY:.5, transformOrigin:"bottom center", ease:Power2.easeIn})
.from(botFrontPeg2,.25, {y:500, ease:Power2.easeOut},"-=.5")
.to(botFrontPeg2,.25, {scaleY:.5, transformOrigin:"top center", ease:Power2.easeIn})
.from(botBackPeg2,.25, {y:500, ease:Power2.easeOut},"-=.5")
.to(botBackPeg2,.25, {scaleY:.5, transformOrigin:"top center", ease:Power2.easeIn})
.from(frontPeg3,.25, {y:-500, ease:Power2.easeOut})
.to(frontPeg3,.25, {scaleY:.5, transformOrigin:"bottom center", ease:Power2.easeIn})
.from(backPeg3,.25, {y:-500, ease:Power2.easeOut})
.to(backPeg3,.25, {scaleY:.5, transformOrigin:"bottom center", ease:Power2.easeIn})
.from(botFrontPeg3,.25, {y:500, ease:Power2.easeOut})
.to(botFrontPeg3,.25, {scaleY:.5, transformOrigin:"top center", ease:Power2.easeIn})
.from(botBackPeg3,.25, {y:500, ease:Power2.easeOut})
.to(botBackPeg3,.25, {scaleY:.5, transformOrigin:"top center", ease:Power2.easeIn})
// console.log(botFrontPeg2)
.add("bottomup")
.to(bottom, .5, {opacity:1, y:-24, ease:Power2.easeIn},"bottomup")
.to(botFrontPeg,.5, {scaleY:.0, transformOrigin:"top center", ease:Power2.easeIn},"bottomup")
.to(botBackPeg,.5, {scaleY:.0, transformOrigin:"top center", ease:Power2.easeIn},"bottomup")
.to(botFrontPeg2,.5, {scaleY:.0, transformOrigin:"top center", ease:Power2.easeIn},"bottomup")
.to(botBackPeg2,.5, {scaleY:.0, transformOrigin:"top center", ease:Power2.easeIn},"bottomup")
.to(botFrontPeg3,.5, {scaleY:.0, transformOrigin:"top center", ease:Power2.easeIn},"bottomup")
.to(botBackPeg3,.5, {scaleY:.0, transformOrigin:"top center", ease:Power2.easeIn},"bottomup")
.to(topx, .5, {opacity:1, y:58, ease:Power2.easeIn})
External CSS
This Pen doesn't use any external CSS resources.