<div class="title">
  <h1>GSAP MorphSVGPlugin</h1>
</div>
<div class="container">
  
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 26.7">
  <title>sitepoint-logo-small</title>
  <g>
    <path id="Fill-10" d="M8.5,11.8l1.9,1.9,6.1,5.7L19,16.8a.9.9,0,0,0-.1-1.1l-2.4-2.1h0l-2.6-2.5a.9.9,0,0,1,.2-1.2l7-6.8L18,0,8.5,9.2a1.7,1.7,0,0,0,0,2.6" class="top-half"/>
    <path id="Fill-11" d="M29.4,15l-1.9-1.9L21.4,7.4,18.7,9.9a.9.9,0,0,0,.1,1.1l2.4,2.1h0l2.6,2.5a.9.9,0,0,1,0,1.2l-7,6.8L20,26.7l7.6-7.3,2-1.9a2,2,0,0,0-.2-2.5" class="bottom-half"/>
  </g>
  <polygon class="star" points="27.6 19.4 22.1 16.4 16.1 18.6 17.9 13.1 13.7 9 20.1 8.6 23.4 3.8 25.8 9 32 10.2 27.1 13.8 27.6 19.4"/>
  <polygon class="triangle" points="7.9 4.4 0 18.7 15.7 18.7 7.9 4.4"/>
</svg>

</div>
<div class="button-container">
  <button class="btn">Morph SitePoint Logo</button>
</div>
$main-color: #1650ad;
* {
  box-sizing: border-box;
}

body{
  font-family:sans-serif;
  text-align: center;
}

.container,
.button-container {
	position: relative;
  max-width: 800px;
  max-height: auto;
  margin: 0 auto;
  padding: 1em;
}


svg {
  display: inline-block;
  width: 50%;
  height: 50%;
}
 
.top-half, 
.bottom-half,
.star,
.triangle {
  fill: $main-color;
}

.top-half,
.bottom-half {
  visibility: hidden;
}

.button-container {
  padding-top: 2em;
}

.btn {
  outline: none;
  border: none;
  padding: 1em;
  border-radius: 10px;
  text-transform: uppercase;
  text-align: center;
  color: white;
  background-color: $main-color;
  cursor: pointer;
  transition: background-color 0.3s;
  
    &:hover,
    &:active,
    &:focus {
      background-color: darken($main-color, 10);
  }
}


View Compiled
// vars
const topLogo = document.querySelector('.top-half'),
      bottomLogo = document.querySelector('.bottom-half'),
      star = document.querySelector('.star'),
      triangle = document.querySelector('.triangle'),
      btn = document.querySelector('.btn'),
      master = new TimelineMax({
        paused: true
      });

// Set some values before animation begins
master.set([topLogo, bottomLogo], {
  transformOrigin: '50% 50%',
});

// Use MorphSVGPlugin to morph the star into 
// the bottom half of SitePoint logo
// and the triangle into the top half of the logo
function enterLogo() {
  const tl = new TimelineMax();
  
  tl.add('startLogo')
    .to('.star', 1, {
      morphSVG: '.bottom-half',
      fill: 'red',
      ease: Elastic.easeOut
  }, 'startLogo+=0.5')
    .to('.triangle', 1, {
      morphSVG: '.top-half',
      fill: '#1650ad',
      ease: Power4.easeIn
  }, 'startLogo-=0.1');
  return tl;
}

// The animation fires when the button is clicked
btn.addEventListener('click', function() {
  master.restart();
});

// Use MorphSVGPlugin.convertToPath() function 
// to change the shape into a path before morphing
MorphSVGPlugin.convertToPath('polygon');

// Add function to master timeline
master.add(enterLogo());
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js