<svg class="bedroom" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 780.9 401.6" enable-background="new 0 0 780.949 401.586" xml:space="preserve">
<polygon fill-rule="evenodd" clip-rule="evenodd" points="75 289 698 289 784 321.7 784 401.2 -1 402 -1 316 "/>
<rect x="73.5" y="57.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="626" height="233"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#373838" stroke="#020202" stroke-miterlimit="10" points="85.3 264.3 117 248.5 210 248.5 204.3 263.5 "/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#373838" stroke="#020202" stroke-miterlimit="10" points="687 263.3 635.2 248.5 562.3 247.5 567.9 262.5 "/>
<rect x="618.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="5" height="44"/>
<rect x="612.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="6" height="44"/>
<rect x="605.5" y="214.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2F3338" stroke="#020202" stroke-miterlimit="10" width="7" height="38"/>
<rect x="597.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2F3338" stroke="#020202" stroke-miterlimit="10" width="8" height="44"/>
<rect x="591.5" y="206.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="6" height="46"/>
<rect x="580.5" y="199.5" fill-rule="evenodd" clip-rule="evenodd" fill="#21242B" stroke="#020202" stroke-miterlimit="10" width="11" height="53"/>
<rect x="573.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="7" height="44"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#111214" stroke="#020202" stroke-miterlimit="10" points="565.5 210.3 573.5 208.5 573.5 253 565.5 248.5 "/>
<rect x="104.5" y="273.5" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" width="106" height="22"/>
<rect x="557.5" y="274.5" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" width="106" height="22"/>
<rect x="85.5" y="264.5" fill-rule="evenodd" clip-rule="evenodd" fill="#48545B" stroke="#020202" stroke-miterlimit="10" width="127" height="15"/>
<rect x="560.5" y="263.5" fill-rule="evenodd" clip-rule="evenodd" fill="#48545B" stroke="#020202" stroke-miterlimit="10" width="127" height="15"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#435660" stroke="#000000" stroke-miterlimit="10" points="208.5 288.6 99.7 387.5 702 387.5 561 290 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#121416" stroke="#020202" stroke-miterlimit="10" d="M212.3 321.7c0 0-1.3 33.9 4 37.9S225 363 229 363s340.7 0 340.7 0 10 2 10.7-12.7 0-23.9 0-23.9L212.3 321.7z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#262C30" stroke="#020202" stroke-miterlimit="10" d="M255.5 215v-31c0 0 1.5-9 9.5-7l240.1-0.3c0 0 8.4-0.4 9.4 5V220L255.5 215z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#435660" stroke="#000000" stroke-miterlimit="10" d="M213.1 286l-30.1 31.2c0 0-4 2.7 35.5 2.3 39.5-0.4 361-2.5 361-2.5s21.2 1.9 32.7 0c11.5-1.9-32.1-26.8-32.1-26.8L213.1 286z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B585E" stroke="#020202" stroke-miterlimit="10" d="M251.4 185.6c0 0 16.8-8.6 24.1-4.6s24.1-3.4 27.4-1 46.7 2.1 47.4-0.5c0.7-2.6 11.3 3.1 11.3 3.1s12.7-3.6 16 3.1 0.7 22.6 4 25.3 -3.3 6.6-3.3 6.6H255c0 0-4.3-15.1 0.5-19.1S250.5 192.8 251.4 185.6z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#4B585E" stroke="#020202" stroke-miterlimit="10" d="M382.6 192.3c0 0 5.7 15.3 2.4 21.3s129.5 3.8 129.5 3.8 -11-12.9-5.5-19.4 -14.7-17.8-26.7-15.8S383.5 173.7 382.6 192.3z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" d="M220.3 304.6c0 0-59.9-25.6 0-73.5 0 0 12.7-18.8 42.1-20.1 0 0 32.7-5.3 62 0 0 0 46-4.1 67.7-2.4 0 0 101 2.1 113.7-0.4 0 0 24-1.2 46 22.1 0 0 18 6.7 22.7 12s24.7 16.7 14.7 54c0 0 14.7 14.5-142.7 8.2C446.3 304.6 226.5 308.5 220.3 304.6z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#262C30" stroke="#020202" stroke-miterlimit="10" d="M185 316.3c0 0 8 4 15.3 2.7s394.7-2.7 394.7-2.7 7.3 2 15.3 0 -8.7 13.3-59.3 10.7 -338 0.3-338 0.3S183.7 325 185 316.3z"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" fill="#80AAB7" d="M292.5 232l112.2 16.3c0 0 169.3 22.8 151.3-5.3l-17.3-9.5c0 0-18.1-22.9-41.4-25.6S511.5 192 486.7 184h-97c0 0-15.2 6.3-7.9 15.4s-4.2 9.5-4.2 9.5l-36.4 0.6L292.5 232z"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#80AAB7" stroke="#000000" stroke-miterlimit="10" points="295.5 232 357 225 392.7 232 351.5 240 "/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" fill="#80AAB7" d="M295.5 231.2l91.6 13.3c0 0 144.8 13.9 130.1-9.1l-12.5-5.6c0 0-16.3-18.2-35.4-19.1 -48.9-2.5 5.1-12.2-15.2-18.7H392c0 0-11.8 7.5-5.9 15 5.9 7.5-21.8 1.9-21.8 1.9l-29.1 3.9L295.5 231.2z"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#4B585E" stroke="#020202" stroke-miterlimit="10" points="351.5 192 351.5 240 295.5 232 295.5 194 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#A3D8E8" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M319.3 208.3l1.2-1.3c0 0-1.2-0.1-1.7 1.3C318.4 209.7 319.3 208.3 319.3 208.3z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#A3D8E8" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M321.1 211.9c-0.7-0.6-0.2-3.1-2-3.1 0 0-1.6 0.2-1.8 2.3 -0.2 2.1-1.9 1.6-1.5 4.4 0 0 4 5.4 6.8-0.7C322.7 214.8 322.7 213.3 321.1 211.9z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#020202" stroke="#020202" stroke-miterlimit="10" d="M255.5 91"/>
<polygon class="half-down" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" points="697.3 41.1 774.7 -1 782.5 0.5 782.5 322 697.5 298.7 "/>
<polygon class="half-down" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" points="-1.5 316.5 75 297.1 73 39.5 32.3 -1.5 -1 -1.5 "/>
<polygon fill-rule="evenodd" clip-rule="evenodd" points="780.3 -2 700.4 57.4 73.5 57.5 22.6 -1 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" d="M202.3 145.8l-13.1-11.5c0 0-8.3-6.4-14.1 1.3 -5.8 7.7-10.2 12.5-10.2 12.5L202.3 145.8z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" d="M188.6 250c0 0 3.1-6.5-8.5-8.6 0 0-15.7-2.1-26.6 0.7 0 0-9.2 1-7.2 8.9C146.2 251 163.7 258.8 188.6 250z"/>
<rect x="153.8" y="184.1" transform="matrix(-0.9409 0.3388 -0.3388 -0.9409 371.3968 355.4198)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="1.8" height="52"/>
<rect x="148" y="185.6" transform="matrix(-0.9409 0.3388 -0.3388 -0.9409 360.7108 360.164)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="1.8" height="52"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" points="136.3 189.1 149.8 187.4 149.2 182.6 135.7 184.4 "/>
<rect x="160.5" y="238.5" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="2" height="5"/>
<rect x="154.5" y="234.6" transform="matrix(-0.9892 0.1467 -0.1467 -0.9892 354.2563 446.8874)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="12.4" height="3.8"/>
<rect x="155.7" y="136" transform="matrix(-0.8328 -0.5536 0.5536 -0.8328 197.2218 386.1722)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="2.4" height="54.6"/>
</svg>
<svg class="bedroom moveup" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 780.9 401.6" enable-background="new 0 0 780.949 401.586" xml:space="preserve">
<g id="Layer_1">
<polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="75 289 698 289 784 321.7 784 401.2 -1 402 -1 316 "/>
<rect x="73.5" y="57.5" fill="#DEA677" stroke="#535353" stroke-miterlimit="10" width="626" height="233"/>
<polygon fill="#C1836A" stroke="#535353" stroke-miterlimit="10" points="85.3 264.3 117 248.5 210 248.5 204.3 263.5 "/>
<polygon fill="#C1836A" stroke="#535353" stroke-miterlimit="10" points="687 263.3 635.2 248.5 562.3 247.5 567.9 262.5 "/>
<rect x="618.5" y="208.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="5" height="44"/>
<rect x="612.5" y="208.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="6" height="44"/>
<rect x="605.5" y="214.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="7" height="38"/>
<rect x="597.5" y="208.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="8" height="44"/>
<rect x="591.5" y="206.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="6" height="46"/>
<rect x="580.5" y="199.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="11" height="53"/>
<rect x="573.5" y="208.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="7" height="44"/>
<polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="565.5 210.3 573.5 208.5 573.5 253 565.5 248.5 "/>
<rect x="104.5" y="273.5" fill="#363F45" stroke="#535353" stroke-miterlimit="10" width="106" height="22"/>
<rect x="557.5" y="274.5" fill="#363F45" stroke="#535353" stroke-miterlimit="10" width="106" height="22"/>
<rect x="85.5" y="264.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="127" height="15"/>
<rect x="560.5" y="263.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="127" height="15"/>
<polygon fill="#796466" stroke="#535353" stroke-miterlimit="10" points="208.5 288.6 99.7 387.5 702 387.5 561 290 "/>
<path fill="#27323D" stroke="#535353" stroke-miterlimit="10" d="M212.3 321.7c0 0-1.3 33.9 4 37.9S225 363 229 363s340.7 0 340.7 0 10 2 10.7-12.7 0-23.9 0-23.9L212.3 321.7z"/>
<path fill="#47535E" stroke="#535353" stroke-miterlimit="10" d="M255.5 215v-31c0 0 1.5-9 9.5-7l240.1-0.3c0 0 8.4-0.4 9.4 5V220L255.5 215z"/>
<path fill="#796466" stroke="#535353" stroke-miterlimit="10" d="M213.1 286l-30.1 31.2c0 0-4 2.7 35.5 2.3 39.5-0.4 361-2.5 361-2.5s21.2 1.9 32.7 0c11.5-1.9-32.1-26.8-32.1-26.8L213.1 286z"/>
<path fill="#796466" stroke="#535353" stroke-miterlimit="10" d="M251.4 185.6c0 0 16.8-8.6 24.1-4.6s24.1-3.4 27.4-1c3.3 2.4 46.7 2.1 47.4-0.5 0.7-2.6 11.3 3.1 11.3 3.1s12.7-3.6 16 3.1 0.7 22.6 4 25.3 -3.3 6.6-3.3 6.6H255c0 0-4.3-15.1 0.5-19.1S250.5 192.8 251.4 185.6z"/>
<path fill="#796466" stroke="#535353" stroke-miterlimit="10" d="M382.6 192.3c0 0 5.7 15.3 2.4 21.3s129.5 3.8 129.5 3.8 -11-12.9-5.5-19.4 -14.7-17.8-26.7-15.8S383.5 173.7 382.6 192.3z"/>
<path fill="#C1836A" stroke="#535353" stroke-miterlimit="10" d="M220.3 304.6c0 0-59.9-25.6 0-73.5 0 0 12.7-18.8 42.1-20.1 0 0 32.7-5.3 62 0 0 0 46-4.1 67.7-2.4 0 0 101 2.1 113.7-0.4 0 0 24-1.2 46 22.1 0 0 18 6.7 22.7 12s24.7 16.7 14.7 54c0 0 14.7 14.5-142.7 8.2C446.3 304.6 226.5 308.5 220.3 304.6z"/>
<path fill="#324152" stroke="#535353" stroke-miterlimit="10" d="M185 316.3c0 0 8 4 15.3 2.7s394.7-2.7 394.7-2.7 7.3 2 15.3 0 -8.7 13.3-59.3 10.7 -338 0.3-338 0.3S183.7 325 185 316.3z"/>
<path display="none" opacity="0.2" fill="#80AAB7" enable-background="new " d="M292.5 232l112.2 16.3c0 0 169.3 22.8 151.3-5.3l-17.3-9.5c0 0-18.1-22.9-41.4-25.6S511.5 192 486.7 184h-97c0 0-15.2 6.3-7.9 15.4 7.2 9.1-4.2 9.5-4.2 9.5l-36.4 0.6L292.5 232z"/>
<polygon fill="#53767C" stroke="#535353" stroke-miterlimit="10" points="295.5 232 357 225 392.7 232 351.5 240 "/>
<path display="none" opacity="0.5" fill="#80AAB7" enable-background="new " d="M295.5 231.2l91.6 13.3c0 0 144.8 13.9 130.1-9.1l-12.5-5.6c0 0-16.3-18.2-35.4-19.1 -48.9-2.5 5.1-12.2-15.2-18.7H392c0 0-11.8 7.5-5.9 15 5.9 7.5-21.8 1.9-21.8 1.9l-29.1 3.9L295.5 231.2z"/>
<polygon fill="#648A93" stroke="#535353" stroke-miterlimit="10" enable-background="new " points="351.5 192 351.5 240 295.5 232 295.5 194 "/>
<g>
<path fill="#E5E5E5" stroke="#535353" stroke-width="0.5" stroke-miterlimit="10" d="M319.3 208.3l1.2-1.3c0 0-1.2-0.1-1.7 1.3C318.4 209.7 319.3 208.3 319.3 208.3z"/>
<path fill="#E5E5E5" stroke="#535353" stroke-width="0.5" stroke-miterlimit="10" d="M321.1 211.9c-0.7-0.6-0.2-3.1-2-3.1 0 0-1.6 0.2-1.8 2.3 -0.2 2.1-1.9 1.6-1.5 4.4 0 0 4 5.4 6.8-0.7C322.7 214.8 322.7 213.3 321.1 211.9z"/>
</g>
<path fill="#020202" stroke="#535353" stroke-miterlimit="10" d="M255.5 91"/>
<polygon fill="#796466" stroke="#535353" stroke-miterlimit="10" points="697.3 41.1 774.7 -1 782.5 0.5 782.5 322 697.3 290.5 "/>
<polygon fill="#796466" stroke="#535353" stroke-miterlimit="10" points="-1.5 316.5 75 289 73 39.5 32.3 -1.5 -1 -1.5 "/>
<polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="780.3 -2 700.4 57.4 73.5 57.5 22.6 -1 "/>
<g>
<path fill="#47535E" stroke="#535353" stroke-miterlimit="10" d="M202.3 145.8l-13.1-11.5c0 0-8.3-6.4-14.1 1.3 -5.8 7.7-10.2 12.5-10.2 12.5L202.3 145.8z"/>
<path fill="#47535E" stroke="#535353" stroke-miterlimit="10" d="M188.6 250c0 0 3.1-6.5-8.5-8.6 0 0-15.7-2.1-26.6 0.7 0 0-9.2 1-7.2 8.9C146.2 251 163.7 258.8 188.6 250z"/>
<rect x="153.8" y="184.1" transform="matrix(0.9409 -0.3387 0.3387 0.9409 -62.0254 64.8058)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="1.8" height="52"/>
<rect x="148" y="185.6" transform="matrix(0.9409 -0.3387 0.3387 0.9409 -62.8533 62.9411)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="1.8" height="52"/>
<polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="136.3 189.1 149.8 187.4 149.2 182.6 135.7 184.4 "/>
<rect x="160.5" y="238.5" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="2" height="5"/>
<rect x="154.5" y="234.6" transform="matrix(0.9892 -0.1467 0.1467 0.9892 -32.9506 26.1191)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="12.4" height="3.8"/>
<rect x="155.7" y="136" transform="matrix(0.8327 0.5537 -0.5537 0.8327 116.6619 -59.5759)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="2.4" height="54.6"/>
</g>
<path fill="none" stroke="#EDC38C" stroke-width="0.5" stroke-miterlimit="10" d="M398.3 19"/>
</g>
<g id="objects">
<g id="ball">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M473.8 46.5c2.7 0.7 5.9 0.4 8.4 1.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M482.2 48c5.5 2.5 11.8 6.5 15.9 10.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.1 58.9c1.5 2.1 3 4.6 3.8 7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 65.9c2.3 5.4 4.6 11.4 6 17.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M507.9 83c0.7 1.8 1 4.1 1.1 6.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M424.4 85.9c0.2-5.9 2.8-12.4 4.8-18"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M429.2 67.9c1.4-2.6 3.4-5.5 5.6-7.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M434.7 60.2c4.2-4.2 9.6-8.3 14.8-11.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.6 48.8c2-0.7 4.1-1.6 6.1-1.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M455.7 47.2c5.7-0.7 12.1-0.6 18.2-0.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M473.8 46.5c0.1 1.1 1 2 1.2 3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475 49.6c0.3 0.2 0.6 0.2 0.8 0.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M455.7 47.2c-0.3 0.9-1.1 1.5-1.3 2.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M454.3 49.6c1.1 0.4 2.4 0.4 3.6 0.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.9 50.3c5.7-0.2 11.5-0.2 17.1-0.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.6 48.8c1 1 3.1 0.2 4.2 1.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.8 49.9c0.2-0.1 0.4-0.2 0.5-0.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M434.7 60.2c0.9 1.9 0.6 4.3 1.5 6.2"/>
<line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="436.2" y1="66.4" x2="436.2" y2="66.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.2 66.4c4.7-3.6 9.2-7.5 14-10.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M429.2 67.9c2.4-0.3 4.6-1.4 7-1.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M424.4 85.9c1.2 1.1 1.5 3 2.7 4.2"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M427 90.1c1.5-1.9 2.7-4.2 4.4-6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 84.2c1.6-5.4 2.9-11.2 4.9-16.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.3 67.9c0-0.2 0-0.4 0-0.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M424.4 85.9c0 2.1 0.4 4.4 1.1 6.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M425.4 92.3c0.6-0.5 0.8-1.3 1.6-1.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M425.4 92.3c1.5 5.6 3.7 11.5 6 16.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 109.1c1 0.4 2.1 0.1 3.2 0.4"/>
<line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="434.6" y1="109.5" x2="434.6" y2="109.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 109.1c0.9 2.5 2.3 4.9 3.8 7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M434.6 109.5c0.2 2.2 0.9 4.4 0.7 6.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M435.2 116.1c4.1 4.4 10.4 8.4 15.9 10.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.2 127c2-1 4.4-0.8 6.2-2"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.4 125c-1.7-2.3-4.1-4.3-5.4-6.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.9 118.2c-1.3-1.3-2.8-2.3-4-3.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.2 127c2.4 1 5.6 0.8 8.3 1.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M459.5 128.4c-0.1-1.1-1-2-1.2-3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M458.3 125.4c-0.3-0.2-0.6-0.2-0.9-0.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M459.5 128.4c6-0.1 12.4 0.1 18.2-0.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.7 127.8c0.3-0.9 1.1-1.5 1.3-2.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M479 125.4c-1.1-0.4-2.4-0.4-3.6-0.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.7 127.8c2 0 4.1-0.9 6.1-1.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.8 126.2c-1.1-0.9-3-0.2-4.2-1.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.8 126.2c5.3-2.9 10.2-7.2 14.8-11.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.6 115.1c-0.9-1.9-0.7-4.3-1.3-6.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M497.3 108.7c-0.1 0-0.2 0-0.2 0"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.6 115.1c1.9-2.5 4.2-5.2 5.6-8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M504.2 107.1c-2.3 0.4-4.6 1.2-6.9 1.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 90.8c-1.6 5.4-2.9 11.2-4.9 16.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M504.2 107.1c2-5.6 4.5-12.1 4.8-18"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M508.9 89.1c-1.2-1.1-1.5-3-2.7-4.2"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M506.3 84.8c-1.5 1.9-2.7 4.2-4.4 6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M506.3 84.3c0 0.2 0 0.4 0 0.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M507.9 83c-0.7 0.2-0.8 1.1-1.6 1.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 65.9c-1-0.4-2.1-0.1-3.2-0.4"/>
<line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="498.7" y1="65.5" x2="498.7" y2="65.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.7 65.5c2 5.6 4.2 11 6.1 16.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.1 58.9c-0.3 2.2 0.5 4.4 0.7 6.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M482.2 48c-2.1 0.8-4.5 0.8-6.4 1.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.8 49.9c0 0.1 0 0.1 0 0.2"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.8 50.1c2 2 4.1 4.2 5.6 6.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M481.4 56.8c1.3 1.3 2.8 2.3 4 3.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M485.4 60.4c1.6 0.8 3.3 1.5 4.7 2.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.8 54.8c1.4 0.3 2.3 1.9 3.6 2"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.8 50.1c0.1 1.6 1.8 2.9 2 4.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.9 50.3c-0.8 2.4-3 4.3-4 6.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.9 56.9c3.1 1.3 6.4 2.3 9.5 3.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 60.3c4.8-1.9 9.6-3.6 14.3-5.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.8 49.9c-0.9 2-2.8 3.6-3.6 5.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M450.2 55.6c1 0.5 2.2 0.8 3.2 1.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.4 56.9c0.2 0 0.4 0 0.5 0"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M492.4 64.6c0 5.1 0 10.2 0 15.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.7 65.5c-1.1-0.2-2.2-0.4-3.3-0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M495.4 64.7c-1 0.4-2-0.1-3-0.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M490.1 62.8c0.5 0.8 1.5 1.1 2.3 1.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M495.4 64.7c-1.5-0.9-3.6-1.7-5.3-1.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.5 72.3c1.5 3.9 3 7.8 4.4 11.8"/>
<line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="481.9" y1="84.1" x2="481.9" y2="84.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M481.9 84.1c3.5-1.2 7-2.8 10.5-4.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 60.3c0 4.2 0 8.3 0 12.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 72.8c4.6-0.4 9.4-0.3 14-0.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.5 72.3c2.5-4 5.5-7.8 7.8-11.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.2 66.4c0.1 0.3 0.1 0.5 0.1 0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.3 67.2c4.9-1.4 9.6-4 14.4-5.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M450.8 61.7c0.4-1.8 2.2-3 2.7-4.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.3 67.9c0.4 4.5-0.4 9.1-0.1 13.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.2 81.5c4.5 1.6 9 3.4 13.5 5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.7 86.6c2.7-1.9 5.2-4.3 8.1-6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.8 80.6c0.3-0.4 0.4-0.7 0.8-1.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 84.2c0.8 0.3 1 1.3 1.7 1.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M433.1 85.9c1.2-1.3 2-2.9 3-4.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M450.8 61.7c2.9 3.9 6.4 7.4 9.5 11.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M460.3 72.8c1.1 0 2.1 0 3.2 0"/>
<line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="463.5" y1="72.8" x2="463.5" y2="72.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 72.8c0 1.1 0 2.3 0 3.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 76.2c4.9 2.7 9.5 6.4 14.3 9.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.8 85.8c1.4-0.6 2.8-1 4.1-1.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.8 80.6c-0.2 2.9-1.6 5.7-2.3 8.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M455.5 89.2c4.8 3.1 9.4 6.8 14.3 9.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M469.8 98.8c1.9-0.7 3.1-2.5 4.9-3.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M474.7 95.4c0.3-0.4 0.4-0.7 0.8-1.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M460.3 72.8c-0.5 2.3-1.7 4.5-1.7 6.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M458.6 79.5c1.8-0.8 3-2.6 4.9-3.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.6 88.4c4.5 1.6 9 3.4 13.5 5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M497.1 93.5c1-1.4 1.9-3 3-4.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M500.2 88.8c-2.8-2.7-5.2-6-7.8-8.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.8 85.8c-0.6 2.9-2 5.7-2.3 8.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.5 94.4c2.9-1.6 5.4-4 8.1-6"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.6 88.4c-0.6-1.4-1-3-1.7-4.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.7 86.6c0.6 1.4 1 3 1.7 4.4"/>
<line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="451.4" y1="90.9" x2="451.4" y2="90.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.4 90.9c1.3-0.7 2.7-1.1 4.1-1.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M433.1 85.9c0 0.1 0 0.2 0 0.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M433.1 86.2c2.8 2.7 5.2 6 7.8 8.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M440.9 95c3.5-1.4 6.9-2.9 10.5-4.1"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M504.8 82.1c-1.8 2-3 4.6-4.6 6.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M500.2 88.8c0 0.1 0 0.2 0 0.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M506.3 84.3c-0.7-0.6-0.7-1.8-1.5-2.3"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M497.1 93.5c0.3 4.6-0.6 9.1-0.1 13.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 90.8c-0.8-0.3-1-1.3-1.7-1.7"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M427 90.1c0 0.2 0 0.4 0 0.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M427 90.7c0.7 0.6 0.7 1.8 body {
background: #000;
font-family: 'Fjalla One', sans-serif;
}
.bedroom {
position: absolute;
top: 0;
left: 50%;
margin-left: -320px;
height: 100vh;
max-height: 450px;
}
p {
text-align: center;
font-size: 30px;
color: #fff;
position: absolute;
z-index: 1000;
width: 100%;
margin-top: 4%;
}
p, .moveup { visibility: hidden; }
.moveup, .t-5 { opacity: 0; }
.t-5 {
transform: translateY(35px) scale(0.8);
font-size: 18px;
color: #EFBB95;
letter-spacing: 0.03em;
}
@media screen and ( min-height: 350px ) {
.bedroom {
margin-left: -400px;
}
}
@media screen and ( min-height: 450px ) {
.bedroom {
margin-left: -450px;
}
}
@media screen and ( min-height: 600px ) {
.bedroom {
margin-top: 10%;
}
p {
font-size: 36px;
margin-top: 225px;
}
}
var $nb = $(".moveup"),
$t1 = $(".t-1"),
$t2 = $(".t-2"),
$t3 = $(".t-3"),
$t4 = $(".t-4"),
$t5 = $(".t-5"),
$path = [{x:-150, y:20}, {x:-75, y:40}, {x:0, y:60}];
TweenMax.set("p, #mstar, #lstar", {perspective:400});
TweenMax.set("p, .moveup", {visibility:"visible"});
// introvert
function sceneOne() {
var tl = new TimelineLite();
sT = new SplitText($t1, {type:"words"});
sT2 = new SplitText($t2, {type:"chars, words"});
tl.staggerFrom(sT.words, 1, {opacity:0, rotationY:-90, ease:Circ.easeOut}, 0.3, "+=1")
.staggerTo(sT.words, 0.8, {rotationY:90, opacity:0, ease:Power4.easeIn}, 0.1, "+=0.5")
.staggerFrom(sT2.chars, 1, {opacity:0, rotationY:-90, y:-10, ease:Elastic.easeOut}, 0.05, "+=0.5")
.staggerTo(sT2.words, 0.8, {rotation:180, scale:0, opacity:0, ease:Back.easeIn}, 0.1, "+=0.5")
.from($t3, 1, {opacity:0, ease:Back.easeOut})
.to($t3, 0.75, {opacity:0, ease:Back.easeOut}, "+=0.75")
;
return tl;
}
// show
function sceneTwo() {
var tl = new TimelineLite();
sT4 = new SplitText($t4, {type:"chars, lines"});
tl.add("bringin");
tl.to($nb, 7, {autoAlpha:1, ease:Back.easeOut}, "bringin")
.from($("#objects"), 2, {scale:0, rotation:120, transformOrigin:"50% 50%", ease:Expo.easeOut}, "bringin")
.from($("#lines"), 3, {autoAlpha:1, scale:0, rotation:-500, transformOrigin:"50% 50%", ease:Back.easeOut}, "bringin")
.staggerFrom(sT4.chars, 1, {opacity:0, rotationY:-90, ease:Circ.easeOut}, 0.1, "bringin+=1")
.staggerTo(sT4.lines, 1.5, {rotationY:-90, scale:0, bezier:$path, opacity:0, ease:Power4.easeIn}, 0.1, "bringin+=5")
.staggerFrom($("#lines line"), 5, {scale:0, rotation:-10, transformOrigin:"50%", ease:Back.easeOut}, 0.1, "bringin=+2")
.staggerFromTo($("#motorcycle path, #ball path, #squiggle path, #elephant path"), 1.5, { drawSVG: '0' }, { drawSVG: true }, 0.01, "bringin=+3")
.fromTo($("#bstar, #lstar, #lstar2, #lines line"), 8, { drawSVG: '0' }, { drawSVG: true }, "bringin=+1")
;
return tl;
}
// away
function sceneThree() {
var tl = new TimelineLite();
tl.add("bringout-=16");
tl.staggerFromTo($("#squiggle path"), 1.5, { drawSVG: true }, { drawSVG: '0' }, 0.01, "bringout")
.to($("#objects"), 3, {autoAlpha:0, scale:4, rotation:90, transformOrigin:"50% 50%", ease:Back.easeIn}, "bringout")
.fromTo($("#bstar, #lstar, #lstar2, #lines line"), 8, { drawSVG: true }, { drawSVG: '0' }, "bringout")
.to($("#lines"), 3, {autoAlpha:0, scale:4, rotation:-500, transformOrigin:"50% 50%", ease:Back.easeIn}, "bringout")
.to($nb, 4, {opacity:0.7, ease:Expo.easeIn}, "bringout")
.to($t5, 6, {opacity:0.85, y:10, scale:1, ease:Expo.easeOut}, "bringout+=4")
;
return tl;
}
var master = new TimelineLite();
$(document).ready(master)
master.add(sceneOne(), "scene1")
.add(sceneTwo(), "scene2")
.add(sceneThree(), "scene3");
//master.seek("scene2");
External CSS
This Pen doesn't use any external CSS resources.