<section class="hz-animation">
  <svg class="horizonSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax slice" text-rendering="optimizeSpeed">
  <defs>
    <linearGradient id="warmSkyGrad" gradientUnits="userSpaceOnUse" x1="418.5291" y1="12" x2="418.5291" y2="419.5709">
      <stop offset="0" style="stop-color:#E84778"></stop>
      <stop offset="0.1552" style="stop-color:#EE6F7A"></stop>
      <stop offset="0.3347" style="stop-color:#F4967C"></stop>
      <stop offset="0.5122" style="stop-color:#F9B57D"></stop>
      <stop offset="0.6847" style="stop-color:#FCCB7E"></stop>
      <stop offset="0.85" style="stop-color:#FED87F"></stop>
      <stop offset="1" style="stop-color:#FFDD7F"></stop>
    </linearGradient>

    <linearGradient id="mountainSkyGrad" gradientUnits="userSpaceOnUse" x1="400" y1="65.7474" x2="400" y2="573.9511">
      <stop offset="0" style="stop-color:#E5F9FA"></stop>
      <stop offset="1" style="stop-color:#FFFFFF"></stop>
    </linearGradient>
    <clipPath id="mainLogoMask">
      <circle class="mainLogoMaskCircle" cx="400" cy="215" r="203.8"></circle>
    </clipPath>
  </defs>

  <rect class="skyBg" x="-400" y="-300" fill="url(#mountainSkyGrad)" width="1600" height="1200"></rect>

  <g class="mainLogoGroup">
    <g class="maskedLogoGroup" clip-path="url(#mainLogoMask)">
      <rect class="warmSkyBg" fill="url(#warmSkyGrad)" width="1900" height="1200" x="-800" y="-600" opacity="0"></rect>
      <circle class="logoSun" fill="#FFFCEA" cx="400" cy="215" r="55.3"></circle>
      <g class="waterGroup">
        <rect id="waterCircle" x="0.2" fill="#5DB3C6" width="2014.1" height="278"></rect>
        <path fill="#A5DCE4" d="M1710,0c-0.4,2.9-2.1,7.4-5.1,13.1c-15.3,21.7-54.3,38-89,40.2c-36.6,2.3-100.9,7.3-102.9,16.5
        c-2,9.2,44.9,15.6,54.8,20.3c19.6,9.2,1.5,25.4-44.6,37.3c-26.2,6.8-106.5,18.5-147,23.7C1007,198.8,0,278,0,278v269h1007h0.2H2014
        V0C2014,0,1743,0,1710,0z"></path>
      </g>
    </g>
  </g>

  <g class="allMountains">
    <g class="smallGroup">
      <g id="small2_1_">
        <polygon fill="#D9D4E2" points="1530.4,229.3 1825.5,489.1 1240.1,489.1    "></polygon>
        <polygon fill="#D9D4E2" points="1146.9,258.6 1213.3,305 1230.4,290.6 1506.1,489.1 836.2,489.1"></polygon>
      </g>

      <g id="small1_1_">
        <polygon fill="#D9D4E2" points="2519.4,229.3 2814.5,489.1 2229.1,489.1"></polygon>
        <polygon fill="#D9D4E2" points="2135.9,258.6 2202.3,305 2219.4,290.6 2495.1,489.1 1825.2,489.1"></polygon>
      </g>
    </g>

  <g class="medGroup">
  <g id="med3_1_">
  <polygon fill="#B3A8C7" points="1824.4,134.3 2266.3,489.1 1334,489.1    "></polygon>
  <polygon fill="#B3A8C7" points="862.6,143.1 1382.8,489.1 408,489.1    "></polygon>
  </g>
  <g id="med1_4_">
  <polygon fill="#B3A8C7" points="3682.4,134.3 4124.3,489.1 3192,489.1    "></polygon>
  <polygon fill="#B3A8C7" points="2720.6,143.1 3240.8,489.1 2266,489.1    "></polygon>
  </g>
  <g id="med1_3_">
  <polygon fill="#B3A8C7" points="5540.4,134.3 5982.3,489.1 5050,489.1    "></polygon>
  <polygon fill="#B3A8C7" points="4578.6,143.1 5098.8,489.1 4124,489.1    "></polygon>
  </g>
  </g>
  <g class="bigGroup">
  <g id="big_7_">
  <polygon fill="#7D76AA" points="541,12 1270.2,489.1 0,489.1     "></polygon>
  <polygon fill="#7D76AA" points="2240.2,0 1511,489.1 2676,489.1    "></polygon>
  </g>
  <g id="big_6_">
  <polygon fill="#7D76AA" points="3217,12 3946.2,489.1 2676,489.1     "></polygon>
  <polygon fill="#7D76AA" points="4916.2,0 4187,489.1 5352,489.1    "></polygon>
  </g>
  <g id="big_5_">
  <polygon fill="#7D76AA" points="5893,12 6622.2,489.1 5352,489.1     "></polygon>
  <polygon fill="#7D76AA" points="7592.2,0 6863,489.1 8028,489.1    "></polygon>
  </g>
  <g id="big_4_">
  <polygon fill="#7D76AA" points="8569,12 9298.2,489.1 8028,489.1     "></polygon>
  <polygon fill="#7D76AA" points="10268.2,0 9539,489.1 10704,489.1    "></polygon>
  </g>
  </g>
  </g>
  <g class="horizon" fill="#7D7D7D">
  <path d="M259.9,278.7c0-1,0.5-1.6,1.5-1.6h1.2c1,0,1.6,0.6,1.6,1.6v16.1c0,1.5-0.3,2.6-0.3,2.6h0.1
  c1.2-3,5.6-8.3,12.9-8.3c8,0,10.8,4.5,10.8,12.5v18.9c0,1-0.5,1.6-1.5,1.6h-1.2c-1,0-1.6-0.6-1.6-1.6v-17.7c0-5.1-0.8-9.5-7-9.5
  c-6.8,0-12.2,5.6-12.2,13.3v14c0,1-0.6,1.6-1.6,1.6h-1.2c-1,0-1.5-0.6-1.5-1.6V278.7z"></path>
  <path d="M312,289.2c9.4,0,17,7.2,17,16.7c0,9.7-7.6,17-17,17c-9.4,0-17-7.3-17-17
  C295.1,296.3,302.7,289.2,312,289.2z M312.1,319c6.8,0,12.5-5.6,12.5-13.1c0-7.3-5.6-12.8-12.5-12.8c-6.9,0-12.5,5.5-12.5,12.8
  C299.6,313.3,305.2,319,312.1,319z"></path>
  <path d="M336.7,291.5c0-1,0.6-1.6,1.6-1.6h1.2c1,0,1.5,0.6,1.5,1.6v4.4c0,1.4-0.3,2.6-0.3,2.6h0.1
  c1.5-4.7,5.2-8.7,10.4-8.7c1.2,0,1.7,0.5,1.7,1.5v1.2c0,1-0.7,1.6-1.8,1.6c-6.8,0-10,7.7-10,14.5v12c0,1-0.5,1.6-1.5,1.6h-1.2
  c-1,0-1.6-0.6-1.6-1.6V291.5z"></path>
  <path d="M358.2,281v-2.3c0-1,0.5-1.6,1.5-1.6h1.6c1,0,1.5,0.6,1.5,1.6v2.3c0,1-0.5,1.5-1.5,1.5h-1.6
  C358.7,282.6,358.2,282,358.2,281z M358.3,291.5c0-1,0.6-1.6,1.6-1.6h1.2c1,0,1.5,0.6,1.5,1.6v29c0,1-0.5,1.6-1.5,1.6h-1.2
  c-1,0-1.6-0.6-1.6-1.6V291.5z"></path>
  <path d="M369.8,320.3c0-0.8,0.2-1.3,0.6-1.9l17.3-21.7c1.3-1.6,2.6-2.9,2.6-2.9v-0.1c0,0-1.1,0.1-3.2,0.1h-15
  c-1,0-1.5-0.6-1.5-1.5v-0.7c0-1,0.5-1.6,1.5-1.6h22.5c1,0,1.5,0.5,1.5,1.4v0.4c0,0.8-0.2,1.3-0.6,1.9l-17.3,21.7
  c-1.2,1.6-2.6,2.9-2.6,2.9v0.1c0,0,1.2-0.1,3.3-0.1h16.4c1,0,1.5,0.6,1.5,1.5v0.7c0,1-0.5,1.6-1.5,1.6h-23.9c-1,0-1.5-0.5-1.5-1.4
  V320.3z"></path>
  <path d="M418,289.2c9.4,0,17,7.2,17,16.7c0,9.7-7.6,17-17,17c-9.4,0-17-7.3-17-17
  C401.1,296.3,408.7,289.2,418,289.2z M418.1,319c6.8,0,12.5-5.6,12.5-13.1c0-7.3-5.6-12.8-12.5-12.8c-6.9,0-12.5,5.5-12.5,12.8
  C405.5,313.3,411.2,319,418.1,319z"></path>
  <path d="M442.7,291.5c0-1,0.6-1.6,1.6-1.6h1.2c1,0,1.5,0.6,1.5,1.6v3.7c0,1.3-0.3,2.3-0.3,2.3h0.1
  c1.2-2.9,5.4-8.4,13-8.4c8,0,10.8,4.5,10.8,12.5v18.9c0,1-0.6,1.6-1.6,1.6h-1.2c-1,0-1.5-0.6-1.5-1.6v-17.7c0-5.1-0.8-9.5-7-9.5
  c-6.8,0-12.2,5.6-12.2,13.1v14.1c0,1-0.5,1.6-1.5,1.6h-1.2c-1,0-1.6-0.6-1.6-1.6V291.5z"></path>
  <path d="M479.5,318.3c0-1,0.5-1.5,1.5-1.5h2.1c1,0,1.5,0.6,1.5,1.5v2.2c0,1-0.5,1.6-1.5,1.6h-2.1
  c-1,0-1.5-0.6-1.5-1.6V318.3z"></path>
  <path d="M493.9,281v-2.3c0-1,0.5-1.6,1.5-1.6h1.6c1,0,1.5,0.6,1.5,1.6v2.3c0,1-0.5,1.5-1.5,1.5h-1.6
  C494.4,282.6,493.9,282,493.9,281z M494,291.5c0-1,0.6-1.6,1.6-1.6h1.2c1,0,1.5,0.6,1.5,1.6v29c0,1-0.5,1.6-1.5,1.6h-1.2
  c-1,0-1.6-0.6-1.6-1.6V291.5z"></path>
  <path d="M523,289.2c9.4,0,17,7.2,17,16.7c0,9.7-7.6,17-17,17c-9.4,0-17-7.3-17-17
  C506.1,296.3,513.7,289.2,523,289.2z M523.1,319c6.8,0,12.5-5.6,12.5-13.1c0-7.3-5.6-12.8-12.5-12.8c-6.9,0-12.5,5.5-12.5,12.8
  C510.6,313.3,516.2,319,523.1,319z"></path>
  </g>

  <g class="wholeChat">

  <linearGradient id="chatPanelGrad" gradientUnits="userSpaceOnUse" x1="400" y1="375" x2="400" y2="182">
  <stop offset="0" style="stop-color:#FFEAB6;stop-opacity:0.6"></stop>
  <stop offset="1" style="stop-color:#FEDA7F;stop-opacity:0"></stop>
  </linearGradient>
  <linearGradient id="chatMaskGrad" gradientUnits="userSpaceOnUse" x1="400" y1="205" x2="400" y2="182">
  <stop offset="0" style="stop-color:#EEEEEE;stop-opacity:1"></stop>
  <stop offset="1" style="stop-color:#FEDA7F;stop-opacity:0"></stop>
  </linearGradient>
  <mask id="chatMask">
  <rect class="chatMask" x="120" y="186" fill="url(#chatMaskGrad)" width="560" height="203"></rect>

  </mask>
  <rect class="chatPanel" x="140" y="186" fill="url(#chatPanelGrad)" width="520" height="203.1"></rect>

  <g class="allChat" mask="url(#chatMask)">
  <g class="chat0 chatMessage">
  <g>
  <circle cx="213.63" cy="410" r="16.7" fill="#e84778"></circle>
  <path d="M213.63,403.21a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,403.21Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,422.26,219.79,419.48,213.63,419.48Z" fill="#fffcea"></path>
  </g>
  <rect x="248.25" y="394.4" width="197.29" height="32.3" rx="6" ry="6" fill="#fffcea"></rect>
  </g>
  <g class="chat1 chatMessage">
  <g>
  <circle cx="586.37" cy="460.06" r="16.7" fill="#5db3c6"></circle>
  <path d="M586.37,453.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,453.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,472.32,592.53,469.54,586.37,469.54Z" fill="#fffcea"></path>
  </g>
  <rect x="443.44" y="443.91" width="111.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"></rect>
  </g>
  <g class="chat2 chatMessage">
  <g>
  <circle cx="586.37" cy="510.06" r="16.7" fill="#5db3c6"></circle>
  <path d="M586.37,503.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,503.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,522.32,592.53,519.54,586.37,519.54Z" fill="#fffcea"></path>
  </g>
  <rect x="483.44" y="493.91" width="71.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"></rect>
  </g>
  <g class="chat3 chatMessage">
  <g>
  <circle cx="213.63" cy="560.06" r="16.7" fill="#e84778"></circle>
  <path d="M213.63,553.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,553.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,572.32,219.79,569.54,213.63,569.54Z" fill="#fffcea"></path>
  </g>
  <rect x="248.25" y="543.97" width="136.29" height="32.3" rx="4.63" ry="4.63" fill="#fffcea"></rect>
  </g>
  <g class="chat4 chatMessage">
  <g>
  <circle cx="586.37" cy="610" r="16.7" fill="#5db3c6"></circle>
  <path d="M586.37,603.21a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,603.21Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,622.26,592.53,619.48,586.37,619.48Z" fill="#fffcea"></path>
  </g>
  <rect x="413.44" y="593.85" width="141.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"></rect>
  </g>
  <g class="chat5 chatMessage">
  <g>
  <circle cx="213.63" cy="660.06" r="16.7" fill="#e84778"></circle>
  <path d="M213.63,653.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,653.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,672.32,219.79,669.54,213.63,669.54Z" fill="#fffcea"></path>
  </g>
  <rect x="248.25" y="643.97" width="87.29" height="32.3" rx="4.63" ry="4.63" fill="#fffcea"></rect>
  </g>
  </g>
  </g>


  </svg>

  <svg class="devicesSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>

  <clipPath id="desktopMask">
  <rect class="desktopMask" x="59" y="154" fill="#009444" width="388" height="231"></rect>

  </clipPath>
  <clipPath id="iPadMask">
  <rect class="iPadMask" x="509" y="215" fill="#ED1C24" width="166" height="224"></rect>

  </clipPath>
  <clipPath id="phoneMask">
  <rect class="phoneMask" x="716" y="333" fill="#ED1C24" width="61" height="107"></rect>
  </clipPath>

  </defs>
  <rect class="testing-canvas" width="100%" height="100%" fill="transparent"></rect>
  <g id="allDevices">
  <g class="desktopGroup device">
  <g clip-path="url(#desktopMask)">
  <g class="desktopSVGContainer"></g>
  </g>
  <g>
  <path fill="#707174" d="M208.9,416.3h83.2l-0.9-5.7c0,0-81.3,0-81.3,0L208.9,416.3z"></path>
  <rect x="61.3" y="156.3" fill="none" width="383" height="226.6"></rect>
  <polygon fill="#A5A7AA" points="203.4,458.3 297.1,458.3 292.1,416.3 208.9,416.3       "></polygon>
  </g>
  <g>
  <path fill="#5A5A5A" d="M458.3,131.3H45.8c-6.6,0-12,5-12,11.1v121v115.7v22c0,6.1,5.4,11.1,12,11.1h163.8h81.9h166.8
  c6.6,0,12-5,12-11.1v-86.8v-116v-55.9C470.3,136.3,464.8,131.3,458.3,131.3z M446.3,318.2V385h-387v-10V259.3V154.3h387v47.9V318.2
  z"></path>
  <path fill="#9E9E9E" d="M255.4,398.6c0.1-0.1,0.4-1.9,0.3-2.3c-0.1-0.4-1-1.6-1.6-2.1c-0.3-0.6-0.7-2.2-0.8-2.5
  c-0.2-0.7-0.4-1-0.7-1.2c-0.2-0.2-0.6-0.7-1.8-0.8c-1.2-0.1-2.2,0.9-2.5,1.7c-0.1,0.2-0.2,0.8-0.4,1.9c-0.2,1.2-0.9,1.6-2.2,3
  c-0.1,0.1-0.1,0.2-0.2,0.2c-0.1,0.3-0.4,1.1,0.1,1.6c0.4,0.4,0.7,0.6,1,0.7c-0.1,0.1-0.4,0.7,0.1,1c0.1,0.1,0.2,0.1,0.3,0.1
  c-0.1,0.8-0.2,1.4-0.1,1.8c0,0.5,0.2,2.1,0.4,2.5c0.2,0.4,0.5,1.3,1.1,1.4c0.5,0.1,0.9-0.3,1.4-0.5s1.2-0.7,1.7-0.9
  c0.2-0.1,0.3-0.1,0.4-0.2c0.3,0.3,0.9,0.9,1.2,1.1c0.2,0.1,0.5,0.2,0.9,0c0.4-0.2,0.8-1.3,1.1-2.2c0.3-0.9,0.5-1.7,0.3-4.1
  C255.4,398.8,255.4,398.7,255.4,398.6z M247.5,400c-0.2,0-0.3,0-0.4,0C247.3,400,247.4,400,247.5,400z"></path>
  </g>

  </g>
  <g class="iPadGroup device">
  <g clip-path="url(#iPadMask)">
  <g class="iPadSVGContainer"></g>

  </g>
  <g>
  <path fill="#5A5A5A" d="M680.1,195h-177c-6.6,0-12,5.4-12,12v108.5v101.1v0.5v29.5c0,6.6,5.4,12,12,12h177c6.6,0,12-5.4,12-12
  v-60.2v-0.5V273.1V207C692.1,200.4,686.7,195,680.1,195z M674.1,277.3V389v0.5v49.1h-165V414v-0.5V311.3v-95.8h165V277.3z"></path>
  </g>
  <g>
  <circle fill="#7C7D80" cx="591.3" cy="204.7" r="1.4"></circle>
  <g>
  <path fill="#444444" d="M591.6,444.3c-2.1,0-3.9,1.6-4.1,3.7c0-0.2,0-0.3,0-0.5c0-2.3,1.9-4.2,4.2-4.2s4.2,1.9,4.2,4.2
  c0,0.2,0,0.3,0,0.5C595.5,446,593.8,444.3,591.6,444.3z"></path>
  <path fill="#7B7C7F" d="M591.6,444.3c2.1,0,3.9,1.6,4.1,3.7c-0.2,2.1-2,3.7-4.1,3.7s-3.9-1.6-4.1-3.7
  C587.7,446,589.5,444.3,591.6,444.3z"></path>
  </g>
  </g>

  </g>
  <g class="phoneGroup device">

  <g clip-path="url(#phoneMask)">
  <g class="phoneSVGContainer"></g>
  </g>
  <g>
  <rect x="716.7" y="334" fill="none" width="59.8" height="105.3"></rect>
  <path fill="#5A5A5A" d="M768.7,315c0,0-2.5,0-2.9,0l-0.1,0h-5.5l-2.2,0h-33.2c-6.7,0-12.2,5.4-12.2,12v6.6v0.5v0.4v5.3v8.9v7.6
  v2.1v7.4v1v79.5c0,6.6,5.5,12,12.2,12h43.8c6.7,0,12.2-5.4,12.2-12V327C780.8,320.4,775.3,315,768.7,315z M776.5,439.3h-59.8V334
  h59.8V439.3z"></path>
  </g>
  <g>
  <circle fill="#7C7D80" cx="746.7" cy="324.8" r="1.4"></circle>
  <g>
  <path fill="#444444" d="M746.6,445.2c-2.1,0-3.9,1.6-4.1,3.7c0-0.2,0-0.3,0-0.5c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2
  c0,0.2,0,0.3,0,0.5C750.5,446.9,748.7,445.2,746.6,445.2z"></path>
  <path fill="#7B7C7F" d="M746.6,445.2c2.1,0,3.9,1.6,4.1,3.7c-0.2,2.1-2,3.7-4.1,3.7c-2.1,0-3.9-1.6-4.1-3.7
  C742.7,446.9,744.4,445.2,746.6,445.2z"></path>
  </g>
  </g>
  </g>
  </g>
  </svg>
</section>
html, body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

html {
  background: #D9D4E2;
}

.devicesSVG {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.horizonSVG {
  width: 100%;
  height: 100%;
  overflow: visible;
}

svg {
  visibility: hidden;
}
var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  devicesSVG = select('.devicesSVG'),
  horizonSVG = select('.horizonSVG'),
  desktopSVGContainer = select('.desktopSVGContainer'),
  iPadSVGContainer = select('.iPadSVGContainer'),
  phoneSVGContainer = select('.phoneSVGContainer'),
  desktopSVG = horizonSVG.cloneNode(true),
  iPadSVG = horizonSVG.cloneNode(true),
  phoneSVG = horizonSVG.cloneNode(true);

desktopSVGContainer.appendChild(desktopSVG);
iPadSVGContainer.appendChild(iPadSVG);
phoneSVGContainer.appendChild(phoneSVG);
select('.hz-animation').removeChild(horizonSVG);
desktopSVG.setAttribute('class', 'desktopSVG');
iPadSVG.setAttribute('class', 'iPadSVG');
phoneSVG.setAttribute('class', 'phoneSVG');

var allMountains = selectAll('.allMountains'),
  warmSkyBg = selectAll('.warmSkyBg'),
  smallGroup = selectAll('.smallGroup'),
  medGroup = selectAll('.medGroup'),
  bigGroup = selectAll('.bigGroup'),
  logoSun = selectAll('.logoSun'),
  mainLogoGroup = selectAll('.mainLogoGroup'),
  mainLogoMaskCircle = selectAll('.mainLogoMaskCircle'),
  waterGroup = selectAll('.waterGroup'),
  notifyDisp = selectAll('.notifyDisp');

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenMax.set(desktopSVGContainer, {
  scale: 0.5,
  x: -74,
  y: 6,
  transformOrigin: '50% 50%',
  svgOrigin: '252 270'
});

TweenMax.set(iPadSVGContainer, {
  scale: 0.375,
  x: 74,
  y: 11,
  transformOrigin: '50% 50%',
  svgOrigin: '591 326'
});

TweenMax.set(phoneSVGContainer, {
  scale: 0.185,
  x: 65,
  y: 16,
  transformOrigin: '50% 50%',
  svgOrigin: '746 386'
});

TweenMax.set(allMountains, {
  x: '-=950',
  y: 111
});

TweenMax.set(waterGroup, {
  x: 800,
  y: 311 + 78
});

TweenMax.set('.phoneGroup', {
  x: -725,
  y: 0,
  scale: 1.05,
  transformOrigin: '0% 100%'
});

TweenMax.set('.iPadGroup', {
  x: -92,
  y: 0
});

TweenMax.set('.desktopGroup', {
  x:0,
  y: 0
});

TweenMax.set(mainLogoMaskCircle, {
  attr: {
    r: 560
  }
});

TweenMax.set(logoSun, {
  attr: {
    cy: 100
  }
});

TweenMax.set('#allDevices', {
  scale:1.32,
  svgOrigin:'-10 250'
});

//DEVICE SPECIFIC ANIMATION vv
TweenMax.set(iPadSVG.querySelector('.waterGroup'), {
  y: 500
});

TweenMax.set(iPadSVG.querySelector('.wholeChat'), {
  y: 111
});

TweenMax.set(phoneSVG.querySelector('.wholeChat'), {
  y: 58,
  scale: 0.7,
  transformOrigin: '50% 0%'
});

//DEVICE SPECIFIC ANIMATION ^^
//DEVICE SPECIFIC ANIMATION vv
TweenMax.set(desktopSVG.querySelector('.horizon'), {
  y: '-=40'
});

//DEVICE SPECIFIC ANIMATION ^^
var tl = new TimelineMax({
  paused: true,
  repeat: -1,
  repeatDelay: 1
});

tl.staggerFrom([smallGroup, medGroup, bigGroup], 0.6, {
  y: '+=400',
  ease: Expo.easeOut
}, 0.1, '-=1')
.to(smallGroup, 4, {
    x: -(2 * 1200),
    ease: Power2.easeInOut
  })
  .to(medGroup, 4, {
    x: -(3 * 1858),
    ease: Power2.easeInOut
  }, '-=4')
  .to(bigGroup, 4, {
    x: -(4 * 2676),
    ease: Power2.easeInOut
  }, '-=4')
  .to('.horizon', 1, {
    alpha: 0,
    x: '-=400',
    ease: Power2.easeIn
  }, '-=4')
  .to(waterGroup, 1, {
    x: -1000,
    ease: Power2.easeOut
  }, '-=1.8')
  .to(warmSkyBg, 1.2, {
    alpha: 1,
    ease: Power2.easeOut
  }, '-=2')
  .from(logoSun, 1.2, {
    attr: {
      cx: '+=500'
    },
    ease: Power2.easeOut
  }, '-=2')

.from('.chatPanel', 0.6, {
  scaleY: 0,
  transformOrigin: '50% 100%',
  ease: Power3.easeInOut
}, '-=0.6')

.to('.chatMessage', 0.6, {
    y: '-=50',
    //delay:0.25,
    ease: Anticipate.easeIn
  }, '-=0.6')
  .from('.chat0 rect', 0.2, {
    scaleX: 0.1,
    y: '+=30',
    transformOrigin: '0% 100%',
    ease: Anticipate.easeIn
  }, '-=0.2')

.to('.chatMessage', 0.4, {
    y: '-=50',
    delay: 0.25,
    ease: Anticipate.easeIn
  })
  .from('.chat1 rect', 0.2, {
    scaleX: 0.1,
    y: '+=30',
    transformOrigin: '100% 100%',
    ease: Anticipate.easeIn
  }, '-=0.2')

.to('.chatMessage', 0.4, {
    y: '-=50',
    delay: 0.25,
    ease: Anticipate.easeIn
  })
  .from('.chat2 rect', 0.2, {
    scaleX: 0.1,
    y: '+=30',
    transformOrigin: '100% 100%',
    ease: Anticipate.easeIn
  }, '-=0.2')

.to('.chatMessage', 0.4, {
    y: '-=50',
    delay: 0.25,
    ease: Anticipate.easeIn
  })
  .from('.chat3 rect', 0.2, {
    scaleX: 0.1,
    y: '+=30',
    transformOrigin: '0% 100%',
    ease: Anticipate.easeIn
  }, '-=0.2')

.to('.chatMessage', 0.4, {
    y: '-=50',
    delay: 0.25,
    ease: Anticipate.easeIn
  })
  .from('.chat4 rect', 0.2, {
    scaleX: 0.1,
    y: '+=30',
    transformOrigin: '100% 100%',
    ease: Anticipate.easeIn
  }, '-=0.2')

.to('.chatMessage', 0.4, {
    y: '-=50',
    delay: 0.25,
    ease: Anticipate.easeIn
  })
  .from('.chat5 rect', 0.2, {
    scaleX: 0.1,
    y: '+=30',
    transformOrigin: '0% 100%',
    ease: Anticipate.easeIn
  }, '-=0.2')

.to('.chatPanel', 1, {
    alpha: 0,
    delay: 0
  })
  .to('.chatMessage', 1, {
    y: '-=200',
    alpha: 0,
    ease: Back.easeIn.config(0.6)
  }, '-=1')

.to(mainLogoMaskCircle, 1, {
    attr: {
      r: 203.8
    },
    ease: Power3.easeInOut
  }, '-=0.5')
//DEVICE SPECIFIC ANIMATION vv
.to(iPadSVG.querySelector('.waterGroup'), 1, {
    y: '-=276',
    x: '-=100',
    ease: Power3.easeInOut
  }, '-=1')
  .to(phoneSVG.querySelector('.waterGroup'), 1, {
    y: '-=170',
    x: '-=100',
    ease: Power3.easeInOut
  }, '-=1')
  .to(desktopSVG.querySelector('.waterGroup'), 1, {
    y: '-=170',
    x: '-=100',
    ease: Power3.easeInOut
  }, '-=1')
  //DEVICE SPECIFIC ANIMATION ^^
  //DEVICE SPECIFIC ANIMATION vv
  .to(iPadSVG.querySelector('.mainLogoGroup'), 1, {
    scale: 0.7,
    x: 418,
    y: 326,
    transformOrigin: '0% 0%',
    ease: Power3.easeInOut
  }, '-=1')
  .to(phoneSVG.querySelector('.mainLogoGroup'), 1, {
    scale: 0.7,
    x: 416,
    y: 326,
    transformOrigin: '0% 0%',
    ease: Power3.easeInOut
  }, '-=1')
  .to(desktopSVG.querySelector('.mainLogoGroup'), 1, {
    scale: 0.7,
    x: 416,
    y: 290,
    transformOrigin: '0% 0%',
    ease: Power3.easeInOut
  }, '-=1')
  //DEVICE SPECIFIC ANIMATION ^^
  .to(logoSun, 1, {
    attr: {
      cy: 215,
      r: 75.3
    },
    ease: Anticipate.easeOut
  }, '-=1')
  .set('.horizon', {
    x: 0
  })
  .to(mainLogoGroup, 1, {
    alpha: 0,
    delay: 0,
    ease: Power1.easeIn
  })
  .to('.horizon', 1, {
    alpha: 1,
    ease: Power2.easeIn
  });

tl.timeScale(0.4);
tl.play(0);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js