Morph Actions

index.html

<svg version="1.1" id="favorite" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 151.8 75" style="enable-background:new 0 0 151.8 75;" xml:space="preserve">
<style type="text/css">
	#favorite__icon{fill:#E54C3B;visibility:hidden;}
#favorite__rect{fill:#E54C3B;}
	#favorite__text{fill:#FFFFFF;font-size:20px;}
</style>
<path id="favorite__icon" d="M76.2,75c41.1-34.6,43.8-50.3,38.8-62.2C107.3-4.9,82.7-3,75.8,10.9C68.9-3,43.9-4.9,36.6,12.8
	C32,25.1,34.7,40.8,76.2,75z"/>
<path id="favorite__rect" d="M149.8,62.5H2c-1.1,0-2-0.9-2-2v-46c0-1.1,0.9-2,2-2h147.8c1.1,0,2,0.9,2,2v46
	C151.8,61.6,150.9,62.5,149.8,62.5z"/>
<text id="favorite__text" transform="matrix(1 0 0 1 39.9578 41.26)">Favorite</text>
</svg>

<svg version="1.1" id="print" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 151.8 75" style="enable-background:new 0 0 151.8 75;" xml:space="preserve">
<style type="text/css">
	#print__icon{fill:#9b59b6;visibility:hidden;}
	#print__rect{fill:#9b59b6;}
#print__text{fill:#fff;font-size:20px;}
</style>
<path id="print__icon" d="M102.7,16.6V0H51.4v16.6H34.7v38.9h16.6V75h36.1l15.1-15.3l0,0v-4.2H117V16.6
	C117,16.6,102.7,16.6,102.7,16.6z M97,5.7v10.9h-40V5.7H97z M102.7,39.2H97v16.3H81.5v14H57.1V39.2h-5.7v13.8h-4.9V33.7h61.5v19.2
	H103L102.7,39.2L102.7,39.2z"/>
<path id="print__rect" d="M149.8,62.5H2c-1.1,0-2-0.9-2-2v-46c0-1.1,0.9-2,2-2h147.8c1.1,0,2,0.9,2,2v46
	C151.8,61.6,150.9,62.5,149.8,62.5z"/>
<text id="print__text" transform="matrix(1 0 0 1 55.1375 41.26)">Print</text>
</svg>

<svg version="1.1" id="download" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 151.8 75" style="enable-background:new 0 0 151.8 75;" xml:space="preserve">
<style type="text/css">
#download__icon{fill:#4FBA6E;visibility:hidden;}
#download__rect{fill:#4FBA6E;}
#download__text{fill:#fff;font-size:20px;}
</style>
<path id="download__icon" d="M65.2,0h21.4v37.5h26.8L75.9,75L38.4,37.5h26.8V0z"/>
<path id="download__rect" d="M149.8,62.5H2c-1.1,0-2-0.9-2-2v-46c0-1.1,0.9-2,2-2h147.8c1.1,0,2,0.9,2,2v46
	C151.8,61.6,150.9,62.5,149.8,62.5z"/>
<text id="download__text" transform="matrix(1 0 0 1 30.6976 41.26)">Download</text>
</svg>

Morph Actions.markdown

Morph Actions

A Pen by Zach Schnackel on CodePen.

License.

script.js

var favoriteButton = document.querySelector('#favorite'),
    printButton = document.querySelector('#print'),
    downloadButton = document.querySelector('#download');

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

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

favoriteButton.addEventListener('mouseenter', function() {
  tlFavorite
    .to('#favorite__text', 0.15, {
      opacity: 0
    })
    .to('#favorite__rect', 0.30, {
      morphSVG: '#favorite__icon',
      ease: Power3.easeOut
    });
  
  tlFavorite.play();
});
favoriteButton.addEventListener('mouseleave', function() {
  tlFavorite.reverse();
});

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

printButton.addEventListener('mouseenter', function() {
  tlPrint
    .to('#print__text', 0.15, {
      opacity: 0
    })
    .to('#print__rect', 0.30, {
      morphSVG: '#print__icon',
      ease: Power3.easeOut
    });
  
  tlPrint.play();
});
printButton.addEventListener('mouseleave', function() {
  tlPrint.reverse();
});

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

downloadButton.addEventListener('mouseenter', function() {
  tlDownload
    .to('#download__text', 0.15, {
      opacity: 0
    })
    .to('#download__rect', 0.30, {
      morphSVG: '#download__icon',
      ease: Power3.easeOut
    });
  
  tlDownload.play();
});
downloadButton.addEventListener('mouseleave', function() {
  tlDownload.reverse();
});

scripts

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

style.css

html, body {
  height: 100%;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
  color: #a8a8a8;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
}

svg {
  max-width: 150px;
  cursor: pointer;
  user-select: none;
  
  visibility: hidden;
  
  + svg {
    margin-top: 15px;
  }
}
text {
  pointer-events: none;
}