Animated Icons

HTML

              
                <svg version="1.1" id="bulbIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">

    <circle class="main-container" fill="none" stroke="#FFF" stroke-width="104" stroke-miterlimit="104" cx="125" cy="125" r="51.5" />

    <g class="bulb-flash">
      <path fill="#FFCC6E" d="M125.127,60.013c-1.518,0-2.754,1.235-2.754,2.751v13.226c0,1.518,1.236,2.755,2.754,2.755 s2.752-1.237,2.752-2.755V62.764C127.879,61.248,126.645,60.013,125.127,60.013z"/>
      <path fill="#FFCC6E" d="M84.09,78.519c-1.041-1.034-2.861-1.034-3.889,0c-0.523,0.52-0.811,1.214-0.811,1.95 c-0.005,0.732,0.282,1.424,0.805,1.947l9.354,9.349c0.521,0.521,1.209,0.804,1.942,0.804c0.735,0,1.429-0.286,1.946-0.804 c0.521-0.52,0.811-1.213,0.811-1.944c0.005-0.737-0.285-1.429-0.808-1.947L84.09,78.519z"/>
      <path fill="#FFCC6E" d="M80.241,123.375c0-1.514-1.233-2.749-2.752-2.749H64.264c-1.518,0.003-2.751,1.235-2.751,2.749 c0,1.521,1.238,2.757,2.751,2.757h13.226C79.008,126.135,80.241,124.897,80.241,123.375z"/>
      <path fill="#FFCC6E" d="M89.372,155.061l-9.354,9.356c-1.071,1.084-1.068,2.83,0.003,3.889c0.516,0.518,1.208,0.808,1.947,0.808l0,0 c0.73,0,1.427-0.279,1.946-0.802l9.353-9.363c1.068-1.065,1.068-2.808-0.006-3.888C92.218,154.026,90.41,154.026,89.372,155.061z"/>
      <path fill="#FFCC6E" d="M160.452,155.24c-1.042-1.038-2.857-1.033-3.888,0.005c-1.064,1.072-1.064,2.813,0,3.887l9.358,9.366 c0.522,0.514,1.211,0.798,1.944,0.798c0.729,0,1.42-0.284,1.939-0.802c1.073-1.082,1.073-2.828,0.005-3.9L160.452,155.24z"/>
      <path fill="#FFCC6E" d="M187.686,121.685c-0.518-0.523-1.209-0.808-1.946-0.808h-13.229c-1.519,0.004-2.758,1.242-2.758,2.76 c0,1.513,1.239,2.748,2.755,2.748h13.238c1.508,0,2.741-1.235,2.741-2.743C188.487,122.898,188.203,122.202,187.686,121.685z"/>
      <path fill="#FFCC6E" d="M158.686,92.747c0.736,0,1.427-0.285,1.936-0.805l9.366-9.358c0.518-0.52,0.805-1.207,0.805-1.937 c0.005-0.732-0.282-1.424-0.805-1.944c-1.041-1.047-2.861-1.05-3.894-0.01l-9.347,9.353c-0.528,0.521-0.817,1.216-0.813,1.952 c0,0.735,0.285,1.426,0.813,1.947C157.262,92.462,157.954,92.747,158.686,92.747z"/>
    </g>

    <g class="bulb-group">
      <path class="bulb" fill="#FFCC6E" d="M124.99,89.808c-18.768,0-34.037,15.271-34.037,34.053c0,11.963,6.225,22.924,16.384,29.079v4.705 c0,3.822,3.115,6.939,6.95,6.939h21.407c3.836,0,6.956-3.117,6.956-6.939v-4.705c10.166-6.155,16.396-17.116,16.396-29.079 C159.047,105.082,143.779,89.808,124.99,89.808L124.99,89.808z"/>

      <g class="fillament-group">
        <line class="fillament-line-left" stroke-linecap="round" stroke-width="5" stroke="#F89922" fill="none" x1="119.156" y1="164.544" x2="119.156" y2="130.344"/>
        <line class="fillament-line-right" stroke-linecap="round" stroke-width="5" stroke="#F89922" fill="none" x1="130.844" y1="164.544" x2="130.844" y2="130.44"/>
        <line class="fillament-line-horizontal" class="line-test-3" stroke-linecap="round" stroke-width="5" stroke="#F89922" fill="none" x1="116.384" y1="130.34" x2="133.615" y2="130.344"/>
        <circle class="fillament-circle-left" fill="#F89922" cx="115.445" cy="127.344" r="6.2"/>
        <circle class="fillament-circle-right" fill="#F89922" cx="134.55" cy="127.344" r="6.2"/>
      </g>

      <path class="bulb-screw1" fill="#C9C7C5" d="M138.391,164.574h-26.783c-2.133,0-3.861,1.717-3.861,3.846c0,2.135,1.731,3.852,3.861,3.852h26.783 c2.135,0,3.86-1.717,3.86-3.852C142.251,166.291,140.525,164.574,138.391,164.574L138.391,164.574z"/>
      <path class="bulb-screw2" fill="#C9C7C5" d="M138.391,172.237h-26.783c-2.133,0-3.861,1.717-3.861,3.852c0,2.132,1.731,3.849,3.861,3.849h26.783 c2.135,0,3.86-1.717,3.86-3.849C142.251,173.954,140.525,172.237,138.391,172.237L138.391,172.237z"/>
      <path class="bulb-end" fill="#656766" d="M116.648,179.952v1.873c0,4.509,3.652,8.162,8.158,8.162c4.511,0,8.164-3.653,8.164-8.162v-1.873H116.648z"/>
    </g>
        
</svg>

<svg version="1.1" id="graphIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">

     <circle class="main-container" fill="none" stroke="#FFF" stroke-width="104" stroke-miterlimit="104" cx="125" cy="125" r="51.5" />

     <path class="browser-bg" fill="#C9C7C7" d="M179.909,170.866c-0.004,5.026-4.105,9.14-9.117,9.134l-91.694-0.091 c-5.012-0.007-9.104-4.122-9.098-9.152l0.09-91.623c0.006-5.033,4.105-9.139,9.118-9.134l91.695,0.092 c5.01,0.005,9.102,4.121,9.097,9.153L179.909,170.866z"/>

    <path class="browser-window" fill="#FFFFFF" d="M174.45,170.013c-0.005,2.514-2.055,4.568-4.558,4.566l-89.888-0.089c-2.504-0.005-4.55-2.064-4.548-4.576 l0.075-75.051c0.003-2.514,2.055-4.57,4.557-4.567l89.883,0.091c2.507,0.002,4.554,2.064,4.552,4.576L174.45,170.013 L174.45,170.013z"/>

    <path class="browser-bar" fill="#FFFFFF" d="M146.081,80.258c-0.002,2.514-2.052,4.569-4.558,4.567l-61.429-0.062c-2.503-0.002-4.551-2.063-4.548-4.575 v-0.003c0.002-2.517,2.056-4.569,4.558-4.567l61.43,0.061c2.506,0.002,4.551,2.063,4.548,4.577V80.258z"/>

    <circle class="browser-btn-left" fill="#FFFFFF" cx="155.979" cy="80.248" r="4.555" />
    <circle class="browser-btn-right" fill="#FFFFFF" cx="169.986" cy="80.248" r="4.555" />

    <line class="chart-vertical" fill="none" stroke="#656766" stroke-linecap="round" stroke-width="5" x1="93" y1="104" x2="93" y2="161"/>
    <line class="chart-horizontal" fill="none" stroke="#656766" stroke-linecap="round" stroke-width="5" x1="156.694" y1="161" x2="94" y2="161"/>

    <line class="chart-line-1" fill="none" stroke="#656766" stroke-linecap="round" stroke-width="5" x1="94" y1="150.312" x2="98" y2="150.312"/>
    <line class="chart-line-2" fill="none" stroke="#656766" stroke-linecap="round" stroke-width="5" x1="94" y1="138.395" x2="98" y2="138.395"/>
    <line class="chart-line-3" fill="none" stroke="#656766" stroke-linecap="round" stroke-width="5" x1="94" y1="126.479" x2="98" y2="126.479"/>
    <line class="chart-line-4" fill="none" stroke="#656766" stroke-linecap="round" stroke-width="5" x1="94" y1="114.562" x2="98" y2="114.562"/>

    <line fill="none" class="colour-bar-1" stroke="#EC7262" stroke-linecap="round" stroke-width="7" x1="109.123" y1="135.123" x2="109.123" y2="150.719" />
    <line fill="none" class="colour-bar-2" stroke="#EC7262" stroke-linecap="round" stroke-width="7" x1="121.017" y1="123.189" x2="121.017" y2="150.719" />
    <line fill="none" class="colour-bar-3" stroke="#FFCC6E" stroke-linecap="round" stroke-width="7" x1="132.922" y1="115.23" x2="132.922" y2="150.719" />
    <line fill="none" class="colour-bar-4" stroke="#FFCC6E" stroke-linecap="round" stroke-width="7" x1="144.822" y1="107.281" x2="144.822" y2="150.719" />

</svg>

<svg version="1.1" id="cartIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">

  <circle class="main-container" fill="none" stroke="#FFF" stroke-width="104" stroke-miterlimit="104" cx="125" cy="125" r="51.5" />

    <g class="cart">
      <polygon class="gift" fill="#9B7FAC" points="86.966,137.619 85.866,79.337 101.46,78.547 106.538,137.247"/>
      <polygon class="gift2" fill="#FFCC6B" points="106.102,136.729 100.063,83.903 135.497,79.658 140.91,137.205"/>
      <polygon class="gift3" fill="#EC7262" points="133.217,136.839 137.826,81.747 151.854,82.986 152.437,136.879"/>

      <g class="wheels">
        <path class="wheel-left" fill="#646565" d="M101.316,166.603c-3.666-0.007-6.645,2.973-6.652,6.652c-0.007,3.683,2.959,6.666,6.625,6.673 c3.667,0.008,6.642-2.964,6.649-6.642C107.947,169.605,104.983,166.61,101.316,166.603z M101.297,176.336 c-1.692-0.003-3.059-1.377-3.056-3.079c0.003-1.692,1.375-3.066,3.067-3.063c1.688,0.004,3.054,1.383,3.051,3.075 C104.356,174.969,102.986,176.34,101.297,176.336z"/>
        <path class="wheel-right" fill="#646565" d="M144.452,166.6c-3.659-0.008-6.642,2.971-6.649,6.655c-0.007,3.678,2.957,6.658,6.623,6.666 c3.669,0.007,6.647-2.962,6.654-6.64C151.083,169.597,148.116,166.606,144.452,166.6z M144.433,176.334 c-1.686-0.004-3.058-1.383-3.055-3.077c0.004-1.698,1.381-3.07,3.066-3.066c1.692,0.003,3.061,1.381,3.057,3.079 C147.498,174.964,146.13,176.337,144.433,176.334z"/>
      </g>
      <path class="trolley-base" fill="#C8C7C6" d="M157.958,153.313l-67.123-0.133l-1.627-6.575l-6.782-0.014l2.593,10.721 c0.028,0.1,0.082,0.171,0.113,0.262c0.058,0.161,0.124,0.31,0.202,0.457c0.115,0.221,0.251,0.416,0.406,0.604 c0.095,0.118,0.197,0.229,0.307,0.336c0.2,0.174,0.412,0.313,0.646,0.434c0.12,0.069,0.227,0.143,0.359,0.192 c0.369,0.143,0.77,0.237,1.186,0.238l69.708,0.138c1.833,0.004,3.321-1.485,3.325-3.32 C161.269,154.818,159.782,153.316,157.958,153.313z"/>
      <path class="trolley" fill="#4BA1D9" d="M177.928,72.607c-0.44-1.783-2.24-2.878-4.02-2.437l-13.281,3.304c-1.296,0.328-2.27,1.392-2.48,2.714 l-1.707,10.679l-0.009,0.058l-30.872,3.676l-50.657,5.946c-0.022,0.002-0.044,0.012-0.066,0.023 c-0.113,0.009-0.227,0.02-0.333,0.044c-0.004,0-0.004,0-0.004,0c-0.004,0-0.004,0.002-0.008,0.004 c-1.44,0.324-2.513,1.605-2.516,3.142c0,0.049,0.011,0.093,0.013,0.141c0,0.132,0.021,0.265,0.038,0.396 c0.009,0.044,0.009,0.092,0.019,0.139c0.012,0.071,0.01,0.141,0.027,0.215l9.884,39.992l0.629,2.537l6.843,0.014l-0.006-0.021 l58.256,0.115v0.013l3.663,0.008c0.225,0,0.447-0.029,0.663-0.076c1.363-0.222,2.425-1.317,2.62-2.701 c0-0.007,0.004-0.016,0.007-0.022l0.015-0.073v-0.004v-0.024l9.722-60.985l11.153-2.773 C177.283,76.198,178.37,74.393,177.928,72.607z M87.775,136.512l-8.353-33.801l10.289-1.214l4.917,35.029L87.775,136.512z M101.337,136.538l-5.029-35.816l10.351-1.225l1.599,37.055L101.337,136.538L101.337,136.538z M121.837,136.579l-6.926-0.014 l-1.64-37.854l10.332-1.221L121.837,136.579z M135.354,136.605l-6.881-0.014l1.806-39.896l10.286-1.219L135.354,136.605z M148.689,136.752l-6.642-0.133l5.305-41.945l8.01-0.851L148.689,136.752z"/>
    </g>     
</svg>

<svg version="1.1" id="appIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">

    <circle class="main-container" fill="none" stroke="#FFF" stroke-width="104" stroke-miterlimit="104" cx="125" cy="125" r="51.5" />

    <g class="mobile"> 

      <g class="mobile-items">
        <path class="mobile-face" fill="#EC7262" d="M164.498,169.808c0,5.607-4.59,10.192-10.197,10.192H95.692c-5.605,0-10.192-4.585-10.192-10.192V80.192 C85.5,74.587,90.087,70,95.692,70h58.613c5.603,0,10.194,4.587,10.194,10.192v89.615H164.498z"/>
        <rect class="mobile-screen" x="93.355" y="79.874" fill="#FAFDFF" width="63.284" height="79.85"/>
        <circle class="mobile-button" fill="#FFFFFF" cx="124.999" cy="170" r="5.095"/>
      </g>

      <g class="sun-items">
        
        <circle fill="transparent" cx="132.752" cy="112.708" r="18.958"/>

        <g class="sun-rays">
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M133.658,100.149v-3.203c0-0.613-0.5-1.116-1.112-1.116
          c-0.618,0-1.111,0.502-1.111,1.116v3.203c0,0.613,0.498,1.113,1.111,1.113C133.158,101.263,133.658,100.762,133.658,100.149z"/>
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M149.353,112.644h-3.199c-0.611,0-1.111,0.498-1.111,1.114
          c0,0.613,0.5,1.111,1.111,1.111h3.199c0.616,0,1.112-0.499,1.112-1.111C150.465,113.142,149.966,112.644,149.353,112.644z"/>
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M122.536,104.798c0.212,0.209,0.491,0.328,0.785,0.328
          c0.298,0,0.578-0.119,0.789-0.328c0.432-0.436,0.432-1.137,0-1.569l-2.262-2.267c-0.423-0.416-1.152-0.416-1.573,0
          c-0.21,0.211-0.327,0.492-0.327,0.789s0.118,0.579,0.327,0.784L122.536,104.798z"/>
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M143.352,104.798l2.267-2.262c0.43-0.433,0.43-1.137,0-1.569
          c-0.418-0.42-1.152-0.424-1.568-0.004l-2.266,2.267c-0.209,0.208-0.328,0.488-0.328,0.787c0,0.3,0.119,0.578,0.328,0.787
          c0.208,0.207,0.492,0.327,0.782,0.327C142.866,105.125,143.143,105.009,143.352,104.798z"/>
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M144.274,120.193c-0.419-0.421-1.151-0.421-1.572,0
          c-0.207,0.208-0.325,0.488-0.325,0.784s0.118,0.574,0.325,0.786l2.27,2.266c0.208,0.211,0.487,0.324,0.779,0.324
          c0.297,0,0.582-0.117,0.792-0.326c0.432-0.432,0.432-1.135-0.004-1.57L144.274,120.193z"/>
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M120.464,111.82c-0.008-0.603-0.506-1.095-1.121-1.095l-3.201,0.039
          c-0.297,0.003-0.577,0.122-0.786,0.334c-0.207,0.209-0.315,0.491-0.315,0.789c0.011,0.606,0.506,1.098,1.113,1.098l3.213-0.041
          c0.297,0,0.576-0.12,0.788-0.335C120.359,112.396,120.469,112.114,120.464,111.82z M116.154,112.672L116.154,112.672v0.003
          V112.672z"/>
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M133.113,124.162c-0.613,0.008-1.103,0.518-1.094,1.125l0.04,3.204
          c0.005,0.604,0.505,1.096,1.108,1.096h0.014c0.297-0.006,0.576-0.123,0.786-0.336c0.208-0.213,0.317-0.494,0.312-0.787
          l-0.038-3.202C134.237,124.656,133.734,124.162,133.113,124.162z M133.168,129.275L133.168,129.275L133.168,129.275
          L133.168,129.275z"/>
          <path fill="#FFCC6D" stroke="#FFCC6D" stroke-width="0.5" d="M122.547,121.035l-2.234,2.29c-0.207,0.213-0.319,0.495-0.316,0.792
          c0.002,0.295,0.121,0.572,0.335,0.777c0.207,0.207,0.485,0.318,0.779,0.318c0.3,0,0.583-0.119,0.791-0.334l2.236-2.291
          c0.209-0.217,0.321-0.495,0.318-0.793c-0.007-0.297-0.126-0.572-0.339-0.779C123.693,120.599,122.961,120.613,122.547,121.035z"/>
        </g>

        <path class="sun" fill="#FFCC6C" d="M132.75,103.963c4.83,0,8.747,3.918,8.747,8.746s-3.917,8.743-8.747,8.743
        c-4.828,0-8.742-3.916-8.742-8.743S127.922,103.963,132.75,103.963z" />
      </g>

      <g class="rain">  
        <g class="rain-drop-1">
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="129.226" y1="134.816" x2="123.592" y2="140.448"/>
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="120.986" y1="143.056" x2="119.985" y2="144.056"/>
        </g>
        <g class="rain-drop-2">
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="122.371" y1="134.816" x2="116.738" y2="140.448"/>
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="114.13" y1="143.056" x2="113.13" y2="144.056"/>
        </g>
        <g class="rain-drop-3">
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="115.455" y1="134.816" x2="109.822" y2="140.448"/>
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="107.214" y1="143.056" x2="106.214" y2="144.056"/>
        </g>
        <g class="rain-drop-4">
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="108.309" y1="134.816" x2="102.676" y2="140.448"/>
          <line fill="none" stroke="#4CA1D9" stroke-width="2.25" stroke-linecap="round" x1="100.068" y1="143.056" x2="99.068" y2="144.056"/>
        </g>
      </g>

      <path class="cloud" fill="#CBCBCB" d="M138.187,122.818c0-4.965-3.941-8.996-8.864-9.177c-1.014-3.714-4.403-6.446-8.442-6.446 c-4.164,0-7.641,2.902-8.537,6.791c-0.805-0.227-1.658-0.36-2.535-0.36c-5.076,0-9.188,4.116-9.188,9.192 c0,4.973,3.947,9.01,8.875,9.174v0.021h20.432v-0.051C134.563,131.49,138.187,127.576,138.187,122.818z"/>
    </g> 
</svg>

<svg version="1.1" id="responsiveIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
  
    <circle class="main-container" fill="none" stroke="#FFF" stroke-width="104" stroke-miterlimit="104" cx="125" cy="125" r="51.5" />

    <rect class="comp-stand" x="108.539" y="162.454" fill="#C8C7C7" width="30.404" height="11.956"/>
    <path class="comp-base" fill="#C8C7C7" d="M148.36,176.137c0,1.092-1.133,1.998-2.517,1.998H101.64c-1.384,0-2.517-0.901-2.517-1.998
      c0-1.098,1.133-1.999,2.517-1.999h44.204C147.228,174.144,148.36,175.044,148.36,176.137z"/>
    <path class="comp-edge" fill="#646665" d="M184.486,153.027c0,5.529-4.525,10.066-10.066,10.066H73.062c-5.537,0-10.066-4.534-10.066-10.066V81.932
      c0-5.538,4.529-10.066,10.066-10.066h101.362c5.537,0,10.066,4.529,10.066,10.066v71.096H184.486z"/>
    <path class="comp-screen" fill="#FFFFFF" d="M178.455,152.396c0,2.767-2.263,5.033-5.033,5.033h-99.36c-2.769,0-5.03-2.267-5.03-5.033V82.561
      c0-2.77,2.262-5.032,5.03-5.032h99.36c2.771,0,5.033,2.262,5.033,5.032V152.396z"/>
    
    <g class="img-1">
      <path fill="#FFCC6C" d="M112.715,109.431c0,1.385-1.136,2.519-2.517,2.519H79.393c-1.385,0-2.52-1.133-2.52-2.519V91.552
        c0-1.385,1.135-2.519,2.52-2.519h30.806c1.381,0,2.517,1.133,2.517,2.519V109.431z"/>
      <path id="XMLID_9_" fill="#FFFFFF" d="M89.294,99.119c0.574,0,1.061-0.202,1.458-0.602c0.407-0.404,0.605-0.891,0.605-1.463
        c0-0.574-0.203-1.061-0.605-1.458c-0.397-0.402-0.884-0.603-1.458-0.603s-1.061,0.2-1.458,0.603
        c-0.402,0.396-0.605,0.887-0.605,1.458c0,0.572,0.203,1.059,0.605,1.463C88.233,98.917,88.722,99.119,89.294,99.119L89.294,99.119
        z"/>
      <path id="XMLID_8_" fill="#FFFFFF" d="M92.39,102.209l-1.718-1.715l-3.441,3.435v2.063h15.125v-4.815l-4.468-4.466L92.39,102.209z
        "/>
    </g>

    <g class="img-2">
      <path fill="#FFCC6C" d="M112.715,143.405c0,1.388-1.136,2.521-2.517,2.521H79.393c-1.385,0-2.52-1.133-2.52-2.521v-17.882
            c0-1.383,1.135-2.516,2.52-2.516h30.806c1.381,0,2.517,1.133,2.517,2.516V143.405z"/>
      <path id="XMLID_11_" fill="#FFFFFF" d="M89.294,133.09c0.574,0,1.061-0.198,1.458-0.597c0.407-0.406,0.605-0.891,0.605-1.463
        c0-0.575-0.203-1.063-0.605-1.463c-0.397-0.396-0.884-0.601-1.458-0.601s-1.061,0.204-1.458,0.601
        c-0.402,0.4-0.605,0.89-0.605,1.463c0,0.572,0.203,1.057,0.605,1.463C88.233,132.892,88.722,133.09,89.294,133.09L89.294,133.09z"
        />
      <path id="XMLID_10_" fill="#FFFFFF" d="M92.39,136.186l-1.718-1.72l-3.441,3.439v2.063h15.125v-4.815l-4.468-4.467L92.39,136.186z
        "/>
    </g>

    <g class="comp-text-1">
      <path fill="#CBCBCB" d="M147.172,94.874c0,0.694-0.566,1.261-1.26,1.261h-25.911c-0.69,0-1.26-0.567-1.26-1.261v-0.251
        c0-0.692,0.569-1.257,1.26-1.257h25.911c0.693,0,1.26,0.565,1.26,1.257V94.874z"/>

      <path fill="#CBCBCB" d="M170.606,100.615c0,0.692-0.564,1.259-1.256,1.259h-49.35c-0.69,0-1.26-0.567-1.26-1.259v-0.25
        c0-0.693,0.569-1.257,1.26-1.257h49.348c0.691,0,1.258,0.564,1.258,1.257V100.615L170.606,100.615z"/>
      <path fill="#CBCBCB" d="M163.061,106.357c0,0.69-0.566,1.257-1.26,1.257h-41.8c-0.69,0-1.26-0.566-1.26-1.257v-0.249
        c0-0.698,0.569-1.261,1.26-1.261h41.8c0.693,0,1.26,0.567,1.26,1.261V106.357z"/>
    </g>

    <g class="comp-text-2">
      <path fill="#CBCBCB" d="M147.172,128.852c0,0.689-0.566,1.254-1.26,1.254h-25.911c-0.69,0-1.26-0.564-1.26-1.254v-0.255
        c0-0.692,0.569-1.257,1.26-1.257h25.911c0.693,0,1.26,0.564,1.26,1.257V128.852z"/>
      <path fill="#CBCBCB" d="M170.606,134.592c0,0.692-0.564,1.259-1.256,1.259h-49.35c-0.69,0-1.26-0.566-1.26-1.259v-0.253
        c0-0.692,0.569-1.26,1.26-1.26h49.348c0.691,0,1.258,0.567,1.258,1.26V134.592L170.606,134.592z"/>
      <path fill="#CBCBCB" d="M163.061,140.331c0,0.691-0.566,1.26-1.26,1.26h-41.8c-0.69,0-1.26-0.568-1.26-1.26v-0.254
        c0-0.689,0.569-1.26,1.26-1.26h41.8c0.693,0,1.26,0.57,1.26,1.26V140.331z"/>
    </g>

    <g class="mob-items">
      <path class="mob-edge" fill="#EC7262" d="M187.005,171.745c0,3.512-2.873,6.39-6.388,6.39h-36.739c-3.513,0-6.388-2.878-6.388-6.39v-56.176
        c0-3.515,2.875-6.388,6.388-6.388h36.739c3.515,0,6.388,2.875,6.388,6.388V171.745z"/>
      <rect class="mob-screen" x="142.415" y="115.373" fill="#FFFFFF" width="39.663" height="50.046"/>
      <circle class="mob-button" fill="#FFFFFF" cx="162.247" cy="171.744" r="2.93"/>

      <g class="mob-text">
        <path fill="#CBCBCB" d="M162.257,143.396c0,0.688-0.301,1.257-0.671,1.257h-13.729c-0.366,0-0.671-0.569-0.671-1.257v-0.25
          c0-0.692,0.301-1.259,0.671-1.259h13.729c0.37,0,0.671,0.566,0.671,1.259V143.396z"/>
        <path fill="#CBCBCB" d="M174.672,149.108c0,0.69-0.299,1.26-0.669,1.26h-26.144c-0.368,0-0.669-0.569-0.669-1.26v-0.254
          c0-0.685,0.301-1.255,0.669-1.255h26.146c0.368,0,0.667,0.57,0.667,1.255V149.108L174.672,149.108z"/>
        <path fill="#CBCBCB" d="M174.672,154.825c0,0.692-0.35,1.259-0.777,1.259h-25.919c-0.429,0-0.785-0.566-0.785-1.259v-0.252
          c0-0.692,0.358-1.257,0.785-1.257h25.919c0.428,0,0.777,0.564,0.777,1.257V154.825z"/>
        <path fill="#CBCBCB" d="M170.674,160.538c0,0.686-0.303,1.26-0.667,1.26h-22.149c-0.366,0-0.671-0.569-0.671-1.26v-0.253
          c0-0.69,0.301-1.261,0.671-1.261h22.149c0.362,0,0.667,0.57,0.667,1.261V160.538z"/>
      </g>

      <g class="img-3">
        <path fill="#FFCC6C" d="M177.301,136.132c0,1.162-0.949,2.117-2.115,2.117h-25.878c-1.162,0-2.117-0.955-2.117-2.117v-15.021
              c0-1.163,0.955-2.118,2.117-2.118h25.882c1.166,0,2.115,0.955,2.115,2.118v15.021H177.301z"/>
        <path id="XMLID_7_" fill="#FFFFFF" d="M157.637,127.473c0.483,0,0.889-0.172,1.228-0.508c0.338-0.34,0.504-0.746,0.504-1.229
          c0-0.479-0.166-0.891-0.504-1.225c-0.339-0.34-0.744-0.509-1.228-0.509c-0.482,0-0.892,0.169-1.229,0.509
          c-0.337,0.334-0.507,0.741-0.507,1.225s0.17,0.889,0.507,1.229C156.745,127.301,157.154,127.473,157.637,127.473L157.637,127.473z
          "/>
        <path id="XMLID_6_" fill="#FFFFFF" d="M160.235,130.069l-1.44-1.436l-2.895,2.884v1.733h12.718v-4.043l-3.757-3.762
          L160.235,130.069z"/>
      </g>

      <g id="xxx">
        <g class="mob-text-1">
          <path fill="#CBCBCB" d="M162.257,189.896c0,0.688-0.301,1.257-0.671,1.257h-13.729c-0.366,0-0.671-0.569-0.671-1.257v-0.25
            c0-0.692,0.301-1.259,0.671-1.259h13.729c0.37,0,0.671,0.566,0.671,1.259V189.896z"/>
          <path fill="#CBCBCB" d="M174.672,195.608c0,0.69-0.299,1.26-0.669,1.26h-26.144c-0.368,0-0.669-0.569-0.669-1.26v-0.254
            c0-0.685,0.301-1.255,0.669-1.255h26.146c0.368,0,0.667,0.57,0.667,1.255V195.608L174.672,195.608z"/>
          <path fill="#CBCBCB" d="M174.672,201.325c0,0.692-0.35,1.259-0.777,1.259h-25.919c-0.429,0-0.785-0.566-0.785-1.259v-0.252
            c0-0.692,0.358-1.257,0.785-1.257h25.919c0.428,0,0.777,0.564,0.777,1.257V201.325z"/>
          <path fill="#CBCBCB" d="M170.674,207.038c0,0.686-0.303,1.26-0.667,1.26h-22.149c-0.366,0-0.671-0.569-0.671-1.26v-0.253
            c0-0.69,0.301-1.261,0.671-1.261h22.149c0.362,0,0.667,0.57,0.667,1.261V207.038z"/>
        </g>
        <g class="img-4">
          <path fill="#FFCC6C" d="M177.301,182.632c0,1.162-0.949,2.117-2.115,2.117h-25.878c-1.162,0-2.117-0.955-2.117-2.117v-15.021
          c0-1.164,0.955-2.118,2.117-2.118h25.882c1.166,0,2.115,0.954,2.115,2.118v15.021H177.301z"/>
          <path id="XMLID_13_" fill="#FFFFFF" d="M157.637,173.973c0.483,0,0.889-0.172,1.228-0.508c0.338-0.34,0.504-0.746,0.504-1.229
            c0-0.479-0.166-0.891-0.504-1.225c-0.339-0.34-0.744-0.51-1.228-0.51c-0.482,0-0.892,0.17-1.229,0.51
            c-0.337,0.334-0.507,0.74-0.507,1.225s0.17,0.889,0.507,1.229C156.745,173.801,157.154,173.973,157.637,173.973L157.637,173.973z"
            />
          <path id="XMLID_12_" fill="#FFFFFF" d="M160.235,176.569l-1.44-1.436l-2.895,2.884v1.733h12.718v-4.043l-3.757-3.762
            L160.235,176.569z"/>
        </g>
      </g>

    </g>

</svg>


<div class="btn  btn-play">
  Reset
</div>

CSS

              
                html {
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: center;
}

svg {
  display: inline-block;
  width: 250px;
  height: 250px;
  margin: 0;
  padding: 0;
  visibility: hidden;
}

.btn {
  display: block;
  width: 125px;
  margin: 50px auto;
  padding: 10px 25px;
  cursor: pointer;
  background: #3b3b3b;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: bold;
  color: #FFFFFF;
}

JS

              
                var iconBulb = (function ($) {

  animation = function() {

    var mainContainer = $('#bulbIcon .main-container'),
        bulbGroup = $('.bulb-group'),
        bulbFlash = $('.bulb-flash'),
        bulbElements = $('.bulb, .bulb-screw1, .bulb-screw2, .bulb-end'),
        fillamentGroup = $('.fillament-group'),
        fillamentLineLeft = $('.fillament-line-left'),
        fillamentLineRight = $('.fillament-line-right'),
        fillamentLineHorizontal = $('.fillament-line-horizontal'),
        fillamentCircleLeft = $('.fillament-circle-left'),
        fillamentCircleRight = $('.fillament-circle-right')

      TweenMax.set([mainContainer, bulbElements, bulbFlash], {
        scale: 0,
        transformOrigin:"50% 50%"
      })

      TweenMax.set([fillamentCircleLeft, fillamentCircleRight], {
        scale: 0,
        transformOrigin:"50% 50%"
      })

      TweenMax.set([fillamentLineLeft, fillamentLineRight, fillamentLineHorizontal], {
        drawSVG:'0% 0%'
      })

      TweenMax.set($('#bulbIcon'), {
        visibility:'visible'
      })

      var tlBulb = new TimelineMax({
        paused: true
      });

      tlBulb.to(mainContainer, 2, {
          scale: 1,
          ease: Elastic.easeOut.config(1, 0.5), y: 0
      })
      .to(bulbElements, 2, {
        scale: 1,
        ease: Elastic.easeOut.config(1, 0.5), y: 0
      }, '-=1.2')
      .to([fillamentLineLeft, fillamentLineRight], 0.2, {
        drawSVG:'100% 0%',
        ease:Sine.easeInOut
      }, '-=1')
      .to([fillamentCircleLeft, fillamentCircleRight], 0.2, {
        scale: 1,
        ease:Sine.easeInOut
      }, '-=0.9')
      .to(fillamentLineHorizontal, 0.2, {
        drawSVG:'100% 0%',
        ease:Sine.easeInOut
      }, '-=0.7')
      .to(bulbFlash, 2, {
        scale: 1,
        ease: Elastic.easeOut.config(1.5, 0.75), y: 0
      }, '-=0.6')
      .add(bulbIdea())

      function bulbIdea() {

        var tl = new TimelineMax({
          repeat: -1
        });

        tl.to(bulbFlash, 0.5, {
          scale: 0,
          ease: Power4.easeOut, y: 0
        }, '+=0.5')
        .to(bulbFlash, 0.5, {
          opacity: 0,
          ease: Power4.easeOut, y: 0
        }, '-=0.65')
        .to(bulbGroup, 0.5, {
          scale: 0.9,
          transformOrigin:"50% 50%",
          ease: Power4.easeOut, y: 0
        }, '-=0.5')
        .to(bulbGroup, 0.5, {
          scale: 1,
          transformOrigin:"50% 50%",
          ease: Power4.easeOut, y: 0
        }, '+=0')
        .to(bulbFlash, 2, {
          scale: 1,
          opacity: 1,
          transformOrigin:"50% 50%",
          ease: Elastic.easeOut.config(1.5, 0.75), y: 0
        }, '-=0.45')
        .to(bulbFlash, 0.5, {
          scale: 0,
          ease: Power4.easeOut, y: 0
        }, '+=0.5')
        .to(bulbFlash, 0.5, {
          opacity: 0,
          ease: Power4.easeOut, y: 0
        }, '-=0.65')
        .to(bulbGroup, 0.5, {
          scale: 0.9,
          transformOrigin:"50% 50%",
          ease: Power4.easeOut, y: 0
        }, '-=0.5')
        .to(bulbGroup, 0.5, {
          scale: 1,
          transformOrigin:"50% 50%",
          ease: Power4.easeOut, y: 0
        }, '+=0')
        .to(bulbFlash, 2, {
          scale: 1,
          opacity: 1,
          transformOrigin:"50% 50%",
          ease: Elastic.easeOut.config(1.5, 0.75), y: 0
        }, '-=0.45')

        return tl;

      }      
		
		
	  $(window).load(function(){
        tlBulb.restart();
	  });
	  
      $('.btn-play').bind('click', function(){
        tlBulb.restart();
      });

  }

  return {
    animation : animation
  }

}(window.$));


var iconGraph = (function ($) {
  animation = function() {

      var mainContainer = $('#graphIcon .main-container'),
          browserBG = $('.browser-bg'),
          browserWindow = $('.browser-window'),
          browserBar = $('.browser-bar'),
          browserBtnLeft = $('.browser-btn-left'),
          browserBtnRight = $('.browser-btn-right'),
          chartBars = $('.chart-vertical, .chart-horizontal'),
          chartLine1 = $('.chart-line-1'),
          chartLine2 = $('.chart-line-2'),
          chartLine3 = $('.chart-line-3'),
          chartLine4 = $('.chart-line-4'),
          colourBar1 = $('.colour-bar-1'),
          colourBar2 = $('.colour-bar-2'),
          colourBar3 = $('.colour-bar-3'),
          colourBar4 = $('.colour-bar-4')

      TweenMax.set([mainContainer, browserBG, browserWindow, browserBar, browserBtnLeft, browserBtnRight], {
        scale: 0,
        transformOrigin:"50% 50%"
      })

      TweenMax.set([chartBars, colourBar1, colourBar2, colourBar3, colourBar4], {
        drawSVG:'0% 0%',
        rotation: 180,
        transformOrigin:"50% 50%"
      })

      TweenMax.set([chartLine1, chartLine2, chartLine3, chartLine4], {
        drawSVG:'0% 0%',
        transformOrigin:"50% 50%"
      })

      TweenMax.set($('#graphIcon'), {
        visibility:'visible'
      })

      var tlGraph = new TimelineMax({
        paused: true
      });

      tlGraph.to(mainContainer, 2, {
        scale: 1,
        ease: Elastic.easeOut.config(1, 0.5), y: 0
      })
      .to(browserBG, 2, {
        scale: 1,
        ease: Elastic.easeOut.config(1, 0.5), y: 0
      }, '-=1.2')
      .to([browserWindow, browserBar, browserBtnLeft, browserBtnRight], 0.4, {
        scale: 1,
        ease: Power4.easeOut, y: 0
      }, '-=0.9')
      .to(chartBars, 0.3, {
        drawSVG:'100% 0%',
        ease:Sine.easeOut
      }, '-=0.3')
      .to(chartLine1, 0.2, {
        drawSVG:'100% 0%',
        ease:Sine.easeInOut
      }, '+=0')
      .to(chartLine2, 0.2, {
        drawSVG:'100% 0%',
        ease:Sine.easeInOut
      }, '-=0.1')
      .to(chartLine3, 0.2, {
        drawSVG:'100% 0%',
        ease:Sine.easeInOut
      }, '-=0.1')
      .to(chartLine4, 0.2, {
        drawSVG:'100% 0%',
        ease:Sine.easeInOut
      }, '-=0.1')
      .to([colourBar1, colourBar2, colourBar3, colourBar4], 0.2, {
        drawSVG:'100% 0%',
        ease: Power0.easeNone
      }, '+=0.2')
      .to([colourBar1], 0.2, {
        attr: {
          y2: 178
        },
        ease: Power0.easeNone
      }, '+=2')
      .to([colourBar4], 0.2, {
        attr: {
          y2: 115
        },
        ease: Power0.easeNone
      }, '-=0.2')
      .to([colourBar2], 0.2, {
        attr: {
          y2: 140
        },
        ease: Power0.easeNone
      }, '-=0.2')
      .to([colourBar3], 0.2, {
        attr: {
          y2: 142
        },
        ease: Power0.easeNone
      }, '-=0.2')
    .add(barSwitch())

    function barSwitch(){
      var tl = new TimelineMax({
        repeat: -1
      });

      tl.to([colourBar1], 0.2, {
        attr: {
          y2: 143
        },
        ease: Power0.easeNone
      }, '+=2')
      .to([colourBar4], 0.2, {
        attr: {
          y2: 149
        },
        ease: Power0.easeNone
      }, '-=0.2')
      .to([colourBar2], 0.2, {
        attr: {
          y2: 150
        },
        ease: Power0.easeNone
      }, '-=0.2')
      .to([colourBar3], 0.2, {
        attr: {
          y2: 133
        },
        ease: Power0.easeNone
      }, '-=0.2')
      .to([colourBar1], 0.2, {
        attr: {
          y2: 178
        },
        ease: Power0.easeNone
      }, '+=2')
      .to([colourBar4], 0.2, {
        attr: {
          y2: 115
        },
        ease: Power0.easeNone
      }, '-=0.2')
      .to([colourBar2], 0.2, {
        attr: {
          y2: 140
        },
        ease: Power0.easeNone
      }, '-=0.2')
      .to([colourBar3], 0.2, {
        attr: {
          y2: 142
        },
        ease: Power0.easeNone
      }, '-=0.2')

      return tl;
    }

	$(window).load(function(){
        tlGraph.restart();
	});
	
    $('.btn-play').bind('click', function(){
      tlGraph.restart();
    });
        
  }

  return {
    animation : animation
  }

}(window.$));


var iconCart = (function ($) {
  animation = function() {

    var mainContainer = $('#cartIcon .main-container'),
        gift = $('.gift'),
        gift2 = $('.gift2'),
        gift3 = $('.gift3'),
        trolley = $('.trolley'),
        trolleyBase = $('.trolley-base'),
        wheels = $('.wheels'),
        wheelLeft = $('.wheel-left'),
        wheelRight = $('.wheel-right')

    TweenMax.set([mainContainer], {
      scale: 0,
      transformOrigin:"50% 50%"
    })

    TweenMax.set([gift, gift2, gift3, trolley, wheelLeft, wheelRight], {
      scale: 0,
      transformOrigin:"50% 50%"
    })

    TweenMax.set([trolleyBase], {
      opacity: 0,
      x: 30
    })

    TweenMax.set($('#cartIcon'), {
      visibility:'visible'
    })

    var tlCart = new TimelineMax({
      paused: true
    });

    tlCart.to(mainContainer, 2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    })
    .to([trolley], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    }, '-=1.2')
    .to([gift, gift2, gift3], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    }, '-=1.9')
    .to([trolleyBase], 1.2, {
      opacity: 1,
      x: 0,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    }, '-=1.4')
    .to([wheelLeft], 1.2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    }, '-=1.1')
    .to([wheelRight], 1.2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    }, '-=0.8')
    .add(trolleyJump(), '-=0.5')

    function trolleyJump(){

      var tl = new TimelineMax({
        repeat: -1
      });

      tl.to([trolleyBase, wheels], 0.2, {
        y: '+=5',
        ease: Power0.easeNone
      }, '+=0.2')
      .to([trolleyBase, wheels], 0.1, {
        y: '-=5',
        ease: Power0.easeNone
      }, '+=0')
      .to([trolley], 0.3, {
        y: -10,
        ease: Power0.easeNone
      }, '-=0.1')
      .to([gift], 0.2, {
        y: -15,
        ease: Power0.easeNone
      }, '-=0.25')
      .to([gift2], 0.2, {
        y: -20,
        ease: Power0.easeNone
      }, '-=0.2')
      .to([gift3], 0.2, {
        y: -20,
        ease: Power0.easeNone
      }, '-=0.15')
      .to([trolley], 0.2, {
        y: 0,
        ease: Power0.easeNone
      }, '+=0')
      .to([gift], 0.2, {
        y: 0,
        ease: Power0.easeNone
      }, '-=0.1')
      .to([gift2], 0.2, {
        y: 0,
        ease: Power0.easeNone
      }, '-=0.1')
      .to([gift3], 0.2, {
        y: 0,
        ease: Power0.easeNone
      }, '-=0.1')

      return tl;
    }

	$(window).load(function(){
        tlCart.restart();
	});	
	
    $('.btn-play').bind('click', function(){
      tlCart.restart();
    });

  }

  return {
    animation : animation
  }

}(window.$));


var iconApp = (function ($) {
  animation = function() {

    var mainContainer = $('#appIcon .main-container'),
        mobile = $('.mobile'),
        mobileItems = $('.mobile-items'),
        theSun = $('.sun'),
        sunRays = $('.sun-rays'),
        cloud = $('.cloud'),
        rainDrop1 = $('.rain-drop-1'),
        rainDrop2 = $('.rain-drop-2'),
        rainDrop3 = $('.rain-drop-3'),
        rainDrop4 = $('.rain-drop-4')

    TweenMax.set([mainContainer], {
      scale: 0,
      transformOrigin:"50% 50%"
    })

    TweenMax.set([mobile], {
      scale: 1.25,
      transformOrigin:"50% 50%"
    })

    TweenMax.set([mobileItems, theSun, sunRays, cloud], {
      scale: 0, 
      transformOrigin:"50% 50%"
    })

    TweenMax.set([rainDrop1, rainDrop2, rainDrop3, rainDrop4], {
      opacity: 0
    })

    TweenMax.set($('#appIcon'), {
      visibility:'visible'
    })

    var tlApp = new TimelineMax({
      paused: true
    });

    tlApp.to(mainContainer, 2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    })
    .to([mobileItems], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(0.8, 0.5), y: 0
    }, '-=1.2')
    .to([theSun, cloud], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    }, '-=1.8')
    .to([sunRays], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(0.8, 0.5), y: 0
    }, '-=1.5')
    .to([rainDrop4], 0.3, {
      opacity: 1,
      ease: Power0.easeNone
    }, '-=1.5')
    .to([rainDrop3], 0.3, {
      opacity: 1,
      ease: Power0.easeNone
    }, '-=1.4')
    .to([rainDrop2], 0.3, {
      opacity: 1,
      ease: Power0.easeNone
    }, '-=1.3')
    .to([rainDrop1], 0.3, {
      opacity: 1,
      ease: Power0.easeNone
    }, '-=1.2')
    .to([$('.sun-items')], 3, {
      rotation:360,
      repeat:-1,
      transformOrigin:'50% 50%',
      ease: Power0.easeNone
    }, 'START-=0.8')
    .add(rain(), 'START-=0.9')


    function rain(){

      var tl = new TimelineMax({
        repeat: -1
      });

      tl.to([rainDrop1, rainDrop2, rainDrop3, rainDrop4], 0.5, {
        opacity: 0,
        ease: Power0.easeNone
      }, '+=0')
      .to([rainDrop4], 0.3, {
        opacity: 1,
        ease: Power0.easeNone
      }, '+=0')
      .to([rainDrop3], 0.3, {
        opacity: 1,
        ease: Power0.easeNone
      }, '-=0.05')
      .to([rainDrop2], 0.3, {
        opacity: 1,
        ease: Power0.easeNone
      }, '-=0.1')
      .to([rainDrop1], 0.3, {
        opacity: 1,
        ease: Power0.easeNone
      }, '-=0.15')

      return tl;

    }    

	$(window).load(function(){
        tlApp.restart();
	});		
	
    $('.btn-play').bind('click', function(){
      tlApp.restart();
    });

  }

  return {
    animation : animation
  }

}(window.$));


var iconRepsonsive = (function ($) {
  animation = function() {

    var mainContainer = $('#responsiveIcon .main-container'),
        compEdge = $('.comp-edge'),
        compStand = $('.comp-stand'),
        compBase = $('.comp-base'),
        compScreen = $('.comp-screen'),
        img1 = $('.img-1'),
        img2 = $('.img-2'),
        img3 = $('.img-3'),
        img4 = $('.img-4'),
        compText1 = $('.comp-text-1'),
        compText2 = $('.comp-text-2'),
        mobileItms = $('.mob-items'),
        mobileText1 = $('.mob-text-1'),
        mobileText = $('.mob-text')

    TweenMax.set([mainContainer], {
      scale: 0,
      transformOrigin:"50% 50%"
    })

    TweenMax.set([compEdge, compStand, compBase, compScreen, img1, compText1, img2, compText2], {
      scale: 0, 
      transformOrigin:"50% 50%"
    })

    TweenMax.set([img4], {
      scale: 0.7,
      rotation: 90,
      transformOrigin:"50% 50%",
      y: -45,
      x: -12,
      opacity: 0
    })

    TweenMax.set([mobileText1], {
      scale: 0.7,
      rotation: 90,
      transformOrigin:"50% 50%",
      y: -45,
      x: -12,
      opacity: 0
    })

    TweenMax.set([mobileItms], {
      opacity: 0,
      x: -24
    })

    TweenMax.set($('#responsiveIcon'), {
      visibility:'visible'
    })

    var tlResponsive = new TimelineMax({
      paused: true
    });

    tlResponsive.to(mainContainer, 2, {
      scale: 1,
      ease: Elastic.easeOut.config(1, 0.5), y: 0
    })
    .to([compEdge, compStand, compBase, compScreen], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(0.8, 0.5), y: 0
    }, '-=1.2')
    .to([img1, compText1], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(0.5, 0.5), y: 0
    }, '-=1.8')
    .to([img2, compText2], 2, {
      scale: 1,
      ease: Elastic.easeOut.config(0.5, 0.5), y: 0
    }, '-=1.8')
    .to([mobileItms], 0.7, {
      opacity: 1,
      ease: Elastic.easeOut.config(0.5, 0.5), x: 0
    }, '-=1.5')
    .add(responsiveDevice(), '-=1.5')


    function responsiveDevice(){

      var tl = new TimelineMax({
        repeat: -1
      });

      tl.to([mobileItms], 0.5, {
        rotation: -90,
        transformOrigin:"50% 50%",
        ease: Power4.easeOut, y: 10, x: -8
      }, '+=1')
      .to([img3], 0.5, {
        scale: 0.7,
        rotation: 90,
        transformOrigin:"50% 50%",
        ease: Power4.easeOut, y: 0, x: 10
      }, '+=0')
      .to([mobileText], 0.5, {
        scale: 0.7,
        rotation: 90,
        transformOrigin:"50% 50%",
        ease: Power4.easeOut, y: 0, x: 10
      }, '-=0.5')
      .to([img4, mobileText1], 0.7, {
        opacity: 1,
        ease: Power4.easeOut, x: -8
      }, '-=0.1')
      .to([mobileItms], 0.5, {
        rotation: 0,
        transformOrigin:"50% 50%",
        ease: Power4.easeOut, y: 0, x: 0
      }, '-=0.1')
      .to([img4, mobileText1], 0.7, {
        opacity: 0,
        ease: Power4.easeOut, x: -12
      }, '-=0.1')
      .to([mobileText, img3], 0.5, {
        scale: 1,
        rotation: 0,
        transformOrigin:"50% 50%",
        ease: Power4.easeOut, y: 0, x: 0
      }, '-=0.5')

      return tl;

    }

	$(window).load(function(){
        tlResponsive.restart();
	});		
	
    $('.btn-play').bind('click', function(){
      tlResponsive.restart();
    });

  }

  return {
    animation : animation
  }

}(window.$));

iconBulb.animation();
iconGraph.animation();
iconCart.animation();
iconApp.animation();
iconRepsonsive.animation();

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions