Social Icons Splash Effect

index.pug

ul.social-icons 
  li.social-icon.si-fb
    a(href="#")
      svg(xmlns='http://www.w3.org/2000/svg', width='80', height='80')
        path.si-grid(fill='#ffffff', d='M0 0h80v80H0z')
        path#facebook-splash.si-splash(fill='#4065B1', fill-rule='nonzero', d='M64.390766 7.893908c9.13892 9.586965-3.91575 14.742016.007852 26.63074 3.923603 11.888725 14.324106 14.96342 8.658127 27.114154-5.66598 12.150732-26.532488 3.603945-34.986257 10.31272-8.45377 6.708774-18.30274 6.258113-20.89926-9.745485-2.596518-16.0036-21.680047-20.760404-6.134962-40.13869 15.545086-19.378288 44.21558-23.760404 53.3545-14.17344z')
        path#facebook-circle.si-circle(fill='#4065B1', fill-rule='nonzero', d='M40 16c-13.254822 0-24 10.747563-24 24.000975C16 53.256335 26.745178 64 40 64s24-10.743665 24-23.999025C64 26.747563 53.253848 16 40 16z')
        path#facebook-icon.si-icon(fill='#FFF', d='M45.5684 40.007098h-3.315943V52h-4.91481V40.007098H35V35.77287h2.337646v-2.74369c0-1.963723.919194-5.02918 4.960693-5.02918l3.639446.014196v4.112776H43.2953c-.431603 0-1.042066.218454-1.042066 1.152208v2.49448H46l-.4316 4.233438z')

  li.social-icon.si-yt
    a(href="#")
      svg(xmlns='http://www.w3.org/2000/svg', width='80', height='80')
        path.si-grid(fill='#ffffff', d='M0 0h80v80H0z')
        path#youtube-splash.si-splash(fill='#E82213', d='M32 7C53-3 50 25 68 31s5.37705 39.535266-17 42c-20.599976 2.268997-12.902118-14.696072-31-14-26 1-9-42 12-52zm-9.171732 70.949766c-4.095558 0-7.415664-3.29269-7.415664-7.354432 0-4.06174 3.320106-7.35443 7.415664-7.35443 4.09556 0 7.415665 3.29269 7.415665 7.35443s-3.320106 7.354432-7.415665 7.354432z')
        path#youtube-circle.si-circle(fill='#E82213', d='M40 16c-13.254822 0-24 10.745178-24 24 0 13.256772 10.745178 24 24 24s24-10.743228 24-24c0-13.254822-10.746152-24-24-24z')
        path#youtube-icon.si-icon(fill='#FFF', d='M52 47.70399C52 50.075355 50.0372 52 47.616866 52H32.384722C29.9628 52 28 50.075356 28 47.70399v-3.45393c0-2.372924 1.9628-4.29601 4.384722-4.29601h15.232144C50.0372 39.95405 52 41.877135 52 44.25006v3.45393zm-20.615344-5.061043h1.416297v6.893073h1.368637v-6.893073h1.41471v-1.17362h-4.199644v1.17362zm11.421725.86932c-.18905 0-.37572.047473-.56.141643-.1819.09417-.35665.234257-.51949.414814v-2.599398h-1.22725v8.066694h1.22725v-.456062c.15807.18367.33203.31753.51791.404697.18429.086387.39717.12919.63626.12919.35825 0 .63627-.11129.82373-.336208.19064-.226475.28676-.548676.28676-.969716v-3.30294c0-.48797-.10088-.8592-.30582-1.11136-.20176-.25371-.49487-.38134-.87933-.38134zm-.06672 4.63144c0 .191454-.03574.32687-.10564.410145-.0699.08483-.17872.12608-.32726.12608-.10247 0-.19858-.02257-.29311-.06382-.09293-.041246-.19064-.113625-.28675-.21013V44.69834c.08261-.083275.16602-.144758.24942-.182115.08341-.041248.17078-.059148.25737-.059148.16284 0 .28993.051366.3789.153318.085.105065.1271.256827.1271.459175v3.074138zm-4.74455.280954c-.13662.08328-.25101.12453-.33838.12453-.11518 0-.19699-.03035-.24942-.09417-.04925-.06226-.07625-.16421-.07625-.3043v-4.56607H36.1181v4.97699c0 .35567.07149.61716.212882.79772.14457.17667.35348.26461.634673.26461.227972 0 .46389-.0607.70616-.18834.24227-.12919.47501-.3113.69981-.55179v.65219h1.214535v-5.9506h-1.21454v4.52171c-.114384.12764-.23989.2327-.376514.31753zm8.47713-4.9871c-.54491 0-.98497.1611-1.32971.48797-.34315.32376-.51631.74636-.51631 1.25845v2.67567c0 .57436.15808 1.0242.47025 1.34951.31218.32687.74032.49109 1.28444.49109.60529 0 1.05964-.15332 1.36229-.46073.307408-.30975.457537-.76892.457537-1.37986v-.30586h-1.2487v.27083c0 .351-.0421.57747-.12074.67943-.07864.10195-.22003.15332-.42179.15332-.19382 0-.330444-.059144-.411466-.179-.079434-.122962-.11756-.33932-.11756-.65374V46.7047h2.32104v-1.519947c0-.562684-.14775-.993842-.44642-1.296586-.29946-.30041-.72761-.450614-1.28285-.450614zm-.59257 2.34102v-.60159c0-.24904.03893-.43038.12392-.53388.085-.11129.22321-.16421.41703-.16421.1827 0 .32091.05292.40352.164217.08341.10351.1271.284066.1271.533888v.6016h-1.07156zm-2.98352-14.44845h1.36546v5.0268c0 .15643.03098.26772.08818.33621.05561.07004.14934.10662.27802.10662.09929 0 .22639-.04747.38128-.13853.15172-.09417.29311-.21091.42021-.35566v-4.97544h1.36864v6.55609H45.4293v-.72378c-.24942.26617-.512344.47085-.78639.60938-.27166.13853-.53538.21013-.792744.21013-.31615 0-.55365-.09884-.7149-.29496-.158076-.19301-.2391-.48486-.2391-.87866v-5.47819zm-4.52532.28407c.36937-.29807.86424-.44983 1.48461-.44983.56636 0 1.02867.15954 1.39168.47552.35984.31598.54015.7269.54015 1.2281v3.385447c0 .56268-.17713 1.00162-.52902 1.31915-.35665.317534-.84358.477078-1.46475.477078-.59734 0-1.07632-.164214-1.43536-.491084-.35824-.33154-.53856-.77515-.53856-1.33161v-3.3979c.0008-.50587.1835-.910565.55127-1.214865zm1.41789 5.30075c.18588 0 .33362-.04825.44245-.14709.10883-.10195.16443-.24048.16443-.41481V32.7808c0-.1432-.0556-.25994-.1676-.346326-.112-.0895-.25736-.133862-.43926-.133862-.16602 0-.30105.04436-.4067.133862-.10406.086387-.154892.203905-.154892.346327v3.57223c0 .179.048455.31753.146158.41482.09612.09884.23592.14709.41544.14709zm-4.69292-4.3645h.09771L36.14431 29h1.56404l-1.79043 5.200352v3.68663H34.3785v-3.522417L32.545972 29h1.55054l.99927 3.550435z')

  li.social-icon.si-tw
    a(href="#")
      svg(xmlns='http://www.w3.org/2000/svg', width='80', height='80')
        path.si-grid(fill='#ffffff', d='M0 0h80v80H0z')
        path#twitter-splash.si-splash(fill='#31A3DC', fill-rule='nonzero', d='M31.73994 72.48838c-11.444275-5.18428-5.9998-8.9997-10.999633-17.9994-4.999832-8.999698-17.872137-8.437337-17.206565-21.137207.665572-12.69987 17.155233-9.957153 22.206398-18.861454 5.051165-8.9043 21.02869-13.15246 28.99903 0 7.97034 13.15245 24.188624 9.05915 17.40265 31.62607-6.78597 22.56691-28.957606 31.55626-40.40188 26.37199z')
        path#twitter-circle.si-circle(fill='#31A3DC', d='M40 16c-13.254822 0-24 10.745178-24 24 0 13.256772 10.745178 24 24 24s24-10.743228 24-24c0-13.254822-10.746152-24-24-24z')
        path#twitter-icon.si-icon(fill='#FFF', d='M51.44107 34.982305c.010742.21641.014875.433633.014875.653297C51.455945 42.307692 46.296755 50 36.862763 50 33.966608 50 31.269647 49.164463 29 47.73258c.401693.046373.80917.069966 1.223262.069966 2.403544 0 4.615334-.80706 6.370053-2.160842-2.244024-.041492-4.1376-1.50185-4.790558-3.507302.312428.060204.633947.090306.96456.090306.467814 0 .92075-.060204 1.351373-.176545-2.34734-.463735-4.115285-2.505796-4.115285-4.949762 0-.02196 0-.04311.000827-.06508.690977.37831 1.481965.6053 2.32337.63215-1.376995-.90713-2.282044-2.45047-2.282044-4.2029 0-.92503.252918-1.79311.694284-2.53834 2.530003 3.054144 6.309717 5.064476 10.57295 5.274377-.087613-.368547-.133072-.754993-.133072-1.15039 0-2.7873 2.296096-5.04821 5.129435-5.04821 1.475353 0 2.807716.613433 3.743346 1.593785 1.16872-.22536 2.26634-.64679 3.25735-1.225237-.38433 1.179678-1.19681 2.16898-2.25642 2.792988 1.03895-.122034 2.02747-.39377 2.94657-.79486-.68601 1.014524-1.55635 1.903757-2.55893 2.61563z')

  li.social-icon.si-in.w-gradient
    a(href="#")
      svg(xmlns='http://www.w3.org/2000/svg', width='80', height='80')
        defs
          lineargradient#instagram-gradient.si-gradient(x1='45.337221%', x2='45.337218%', y1='93.122416%', y2='-8.953903%')
            stop(stop-color='#FBBC6E', offset='0%')
            stop(stop-color='#D8456A', offset='50.773063%')
            stop(stop-color='#4459A9', offset='100%')
        g
          path.si-grid(fill='#ffffff', d='M0 0h80v80H0z')
          path#instagram-splash.si-splash(fill='url(#instagram-gradient)', fill-rule='nonzero', d='M23.18745 12.944335c-6.54792 27.757068-21.791687 24.90854-17.407975 39.16266 4.383713 14.25412 15.53734 9.09612 28.702498 17.354234 13.165158 8.25811 22.386095 16.8613 37.302005-15.81006s-42.04861-68.4639-48.596528-40.706835z')
          path#instagram-circle.si-circle(fill='url(#instagram-gradient)', fill-rule='nonzero', d='M39.999673 16C26.73156 16 16 26.731707 16 40s10.73156 24 23.999673 24c13.268112 0 23.999673-10.731707 23.999673-24 .09756-13.268293-10.73156-24-23.999673-24z')
          path#instagram-icon.si-icon(fill='#FFF', d='M51 44.842105c0 1.81579-.633962 3.394737-1.743396 4.5C48.14717 50.447368 46.562264 51 44.818868 51h-8.637736c-1.743396 0-3.328302-.552632-4.437736-1.657895C30.554716 48.236842 30 46.657895 30 44.842105v-8.68421C30 32.526315 32.456604 30 36.181132 30h8.71698c1.822643 0 3.328303.63158 4.437737 1.736842C50.44528 32.842105 51 34.342105 51 36.157895v8.68421zm-6.181132-12.947368h-8.71698c-1.267926 0-2.37736.394737-3.090567 1.105263-.713203.710526-1.10943 1.81579-1.10943 3.078947v8.68421c0 1.26316.396227 2.368422 1.18868 3.157896.79245.710526 1.82264 1.105263 3.090566 1.105263h8.637736c1.267924 0 2.377358-.394737 3.090566-1.105263.792453-.710527 1.18868-1.81579 1.18868-3.078948v-8.68421c0-1.263158-.396227-2.289474-1.109435-3.078948-.792453-.789473-1.82264-1.18421-3.16981-1.18421zm-4.35849 13.894737c-3.01132 0-5.38868-2.44737-5.38868-5.36842 0-3 2.456604-5.368422 5.38868-5.368422 2.932075 0 5.467924 2.36842 5.467924 5.36842 0 3-2.456604 5.368422-5.467925 5.368422zm-.055685-2.10821c1.894917 0 3.43105-1.53034 3.43105-3.418106 0-1.887767-1.536133-3.418105-3.43105-3.418105s-3.43105 1.530338-3.43105 3.418105c0 1.887767 1.536133 3.418105 3.43105 3.418105zm5.6821-7.602317c-.713208 0-1.267925-.55263-1.267925-1.263157 0-.710527.554717-1.263158 1.267924-1.263158.713208 0 1.267925.55263 1.267925 1.263157 0 .710522-.554717 1.263153-1.267924 1.263153z')

  li.social-icon.si-st
    a(href="#")
      svg(xmlns='http://www.w3.org/2000/svg', width='80', height='80')
        path.si-grid(fill='#ffffff', d='M0 0h80v80H0z')
        path#steam-splash.si-splash(fill='#353535', fill-rule='nonzero', d='M45.331115 21.477975c14.95994 1.83685 29.52978-1.394228 32.937636 12.07628 3.40786 13.470507-13.03519 15.467577-22.95696 30.31343C45.39003 78.71354 31 79 19 67 7 55-4 20 12.514925 8.4126c16.514925-11.5874 17.85625 11.228525 32.81619 13.065375zm5.127594-3.769112c-4.09556 0-7.41567-3.29269-7.41567-7.354432C43.04304 6.29269 46.36315 3 50.45871 3c4.095557 0 7.415663 3.29269 7.415663 7.35443 0 4.061742-3.320106 7.354433-7.415664 7.354433z')
        path#steam-circle.si-circle(fill='#353535', fill-rule='nonzero', d='M40 16c13.253848 0 24 10.747563 24 24.000975C64 53.256335 53.254822 64 40 64S16 53.256335 16 40.000975C16 26.747563 26.745178 16 40 16z')
        path#steam-icon.si-icon(fill='#FFF', d='M27.326653 43.98868c-.68214-2.944713-.08419-5.368743-.08419-5.368743l6.336072 2.751196c.234705.10124.506265.06389.706055-.098292 1.068782-.9436 2.471194-1.40557 3.883305-1.27779.234705.02556.46553-.07372.61101-.26244l2.865925-3.79801c.101835-.13761.150328-.3106.13578-.48163v-.304703c.021337-3.357657 2.682622-6.08428 5.99662-6.147187 3.314-.061925 6.07324 2.565423 6.21678 5.920133.145478 3.35471-2.376148 6.21501-5.683358 6.44796-.13869.00786-.27156.06094-.380184.150385L43.381842 45.3038c-.145478.122865-.232765.301757-.242464.49441-.160026 2.916326-2.537144 5.19965-5.419556 5.201617-2.4421.01966-4.58742-1.639512-5.214918-4.031942-.048493-.19167-.177483-.351886-.353027-.440348l-4.825224-2.538857zm20.57666-5.368743c1.875702 0 3.394496-1.54122 3.394496-3.440223 0-1.90097-1.5188-3.440224-3.3945-3.440224-1.87473 0-3.3945 1.539255-3.3945 3.440224 0 1.899003 1.51976 3.440223 3.394492 3.440223zm-9.274736 8.72244l.00097.000984c-.74194.38728-1.642937.27129-2.267524-.28897-.283198-.230984-.695387-.193633-.934942.081585-.24052.2762-.22306.694925.0388.950484 1.08818.974074 2.66905 1.139205 3.92986.407912 1.262756-.727362 1.925168-2.191914 1.650698-3.63681-.27544-1.444893-1.42569-2.55363-2.864955-2.757093-.178453-.02752-.360786.01966-.504325.131712-.14354.11107-.236647.277182-.256044.460005-.048493.376457.213368.72048.583853.769625.886447.119915 1.59444.81386 1.73992 1.708316.14645.89544-.300655 1.783018-1.102726 2.186016l-.013577-.01376z')

script.js

$(function() {

  var speed = 0.7;
  var ease = Elastic.easeInOut.config(1.2, 0.5);
  var demoDelay = 0;

  $('.social-icon').each(function() {
    var tl = new TimelineLite({  }),
      $this = $(this),
      $circle = $this.find('.si-circle'),
      $splash = $this.find('.si-splash'),
      $icon = $this.find('.si-icon'),
      $gradient = $this.find('.si-gradient'),
      color = $circle.css('fill');
    
    // tl.pause(); // turn on
    
    $this.css('opacity', 1);

    // Morph and animate colors
    if($this.hasClass('w-gradient')) {
       tl.to($circle, speed, {
        morphSVG: $splash,
        ease: ease
      }, 0)

      $gradient.find('stop').each(function(i) {
        $(this).attr('stop-color', '#989898');
      }, 0);

      tl.to($gradient.find('stop:nth-child(1)'), speed, {
        attr:  {offset:'0%'}, stopColor: '#FBBC6E',
        ease: ease
      }, 0)
      .to($gradient.find('stop:nth-child(2)'), speed, {
        attr:  {offset:'50%'}, stopColor: '#D8456A',
        ease: ease
      }, 0)
      .to($gradient.find('stop:nth-child(3)'), speed, {
        attr:  {offset:'100%'}, stopColor: '#4459A9',
        ease: ease
      }, 0)

    } else {
      $circle.attr("fill",'#989898');

      tl.to($circle, speed, {
        morphSVG: $splash,
        css: {
          fill: color,
        },
        ease: ease
      }, 0)
    }


    // Animate icon
    tl.to($icon, speed + .1, {
      css: {
        scale: 1.2,
        transformOrigin: "center center",
      },
      ease: Back.easeInOut.config(1)
    }, 0);
  
   
    

    // On hover play timeline
    $(this).hover(function() {
      tl.play();
    }, function() {
      var currentTime = tl.time();
      tl.reverse(currentTime);
    });
    
    
    // for demo
    setTimeout(function() {
      tl.play();
    }, demoDelay);
    setTimeout(function() {
      tl.reverse();
    }, demoDelay + 1000);
    demoDelay = demoDelay + 100;
    // END demo
    

  });
  
  
  
  
  


});

scripts

<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

social-icons-splash-effect.markdown

Social Icons Splash Effect

Animating SVGs with Greensock.

A Pen by Anton Korzhuk on CodePen.

License.

style.scss

// for demo 
body {
  height: 100vh;
  background: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.social-icons {
  transform: scale(1.5);
}
// END demo



.social-icons {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
  //transform: scale(2);
}
.social-icon {
  opacity: 0;
  transition: opacity .3s;
  
  svg {
    overflow: visible !important;
  }
  
  .si-circle {
    //fill: #616161;
  }
  
  .si-splash,
  .si-grid{
    display: none;
    visibility:hidden;
  }
  .si-icon {
    transform-origin: "center center";
  }
  
}