<div class="content"><div id="header"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg" width="100" style="vertical-align: middle; margin-right: 16px;" /><h1>Try GSAP 3 Bonus Plugins FREE on CodePen</h1></div>
<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>
<p>These URLs point to special trial versions of the <a href="https://greensock.com/club/" target="_blank">Club GreenSock</a> bonus plugins that only work on CodePen; kick the tires as much as you want...for free. Use the URLs directly in your own pens or simply fork this one. </p>
<ul>
  <li><button data-link="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js">Copy URL</button><a class="name" href="https://greensock.com/3" target="_blank">GSAP Core</a> <span class="url">https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js</span></li>
  
  
    <li><button data-link="https://assets.codepen.io/16327/CustomBounce3.min.js">Copy URL</button><a class="name" href="https://greensock.com/custombounce" target="_blank">CustomBounce</a> <span class="url">https://assets.codepen.io/16327/CustomBounce3.min.js</span></li>
  
    <li><button data-link="https://assets.codepen.io/16327/CustomWiggle3.min.js">Copy URL</button><a class="name" href="https://greensock.com/customwiggle" target="_blank">CustomWiggle</a> <span class="url">https://assets.codepen.io/16327/CustomWiggle3.min.js</span></li>
  
  <li><button data-link="https://assets.codepen.io/16327/DrawSVGPlugin3.min.js">Copy URL</button><a class="name" href="https://greensock.com/drawSVG" target="_blank">DrawSVG</a> <span class="url">https://assets.codepen.io/16327/DrawSVGPlugin3.min.js</span></li>

   
  <li><button data-link="https://assets.codepen.io/16327/EasePack3.min.js">Copy URL</button><a class="name" href="https://greensock.com/ease-visualizer" target="_blank">EasePack</a> <span class="url">https://assets.codepen.io/16327/EasePack3.min.js</span> </li>
  
  <li><button data-link="https://assets.codepen.io/16327/InertiaPlugin.min.js">Copy URL</button><a class="name" href="https://greensock.com/" target="_blank">Inertia</a> <span class="url">https://assets.codepen.io/16327/InertiaPlugin.min.js</span> </li>
  
  <li><button data-link="https://assets.codepen.io/16327/GSDevTools3.min.js">Copy URL</button><a class="name" href="https://greensock.com/gsdevtools" target="_blank">GSDevTools</a> <span class="url">https://assets.codepen.io/16327/GSDevTools3.min.js</span> </li>
  
  <li><button data-link="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js">Copy URL</button><a class="name" href="https://greensock.com/morphSVG" target="_blank">MorphSVG</a> <span class="url">https://assets.codepen.io/16327/MorphSVGPlugin3.min.js</span> </li>
  
    <li><button data-link="https://assets.codepen.io/16327/MotionPathHelper.min.js">Copy URL</button><a class="name" href="https://greensock.com/docs/v3/Plugins/MotionPathPlugin/MotionPathHelper" target="_blank">MotionPathHelper</a> <span class="url">https://assets.codepen.io/16327/MotionPathHelper.min.js</span> </li>
  
  
  
    <li><button data-link="https://assets.codepen.io/16327/Physics2DPlugin3.min.js">Copy URL</button><a class="name" href="https://greensock.com/Physics2DPlugin" target="_blank">Physics2D</a> <span class="url">https://assets.codepen.io/16327/Physics2DPlugin3.min.js</span> </li>
  
  <li><button data-link="https://assets.codepen.io/16327/PhysicsPropsPlugin3.min.js">Copy URL</button><a class="name" href="https://greensock.com/PhysicsPropsPlugin" target="_blank">PhysicsProps</a> <span class="url">https://assets.codepen.io/16327/PhysicsPropsPlugin3.min.js</span> </li>
  
  <li><button data-link="https://assets.codepen.io/16327/ScrambleTextPlugin3.min.js">Copy URL</button><a class="name" href="https://greensock.com/scrambletextplugin" target="_blank">ScrambleText</a> <span class="url">https://assets.codepen.io/16327/ScrambleTextPlugin3.min.js</span> </li>
   
  <li><button data-link="https://assets.codepen.io/16327/ScrollSmoother.min.js">Copy URL</button><a class="name" href="https://greensock.com/flip" target="_blank">ScrollSmoother</a> <span class="url">https://assets.codepen.io/16327/ScrollSmoother.min.js</span></li>
  
  
  
  <li><button data-link="https://assets.codepen.io/16327/SplitText3.min.js">Copy URL</button><a class="name" href="https://greensock.com/splittext" target="_blank">SplitText</a> <span class="url">https://assets.codepen.io/16327/SplitText3.min.js</span> </li>
  
  
</ul>

<p>When you're ready, <a href="https://greensock.com/club/" target="_blank">sign up for Club GreenSock</a> to get plugins files that run anywhere. Happy tweening!</p>
</div>

<a href="https://greensock.com"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a>
body {
  padding: 20px 30px;
  text-align: center;
}
.content {
  max-width: 1000px;
  text-align: left;
  display: inline-block;
}
.name {
  font-size: 24px;
}
.unfinished {
  display: none;
}
.content ul {
  list-style: none;
}
button {
  margin: 2px 1px 2px 10px;
  padding: 6px 14px;
  margin: 5px 10px 5px 0px;
  vertical-align: middle;
  position: relative;
  top: -4px;
}
#header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media only screen and (max-width: 500px) {
  h1 {
    font-size: 26px;
    line-height: 28px;
  }
}
@media only screen and (max-width: 900px) {
  .url {
    display: none;
  }
}
.gsap-3-logo {
    width: 20vw;
    max-width: 150px;
    position: fixed;
    bottom: 15px;
    right: 15px;
}



//just for copy-to-clipboard functionality (add data-link attribute to any element)
(function() {
  document.body.addEventListener('click', copy, true);
  var copyElement = document.createElement("textarea");
  copyElement.style.display = "none";
  document.body.appendChild(copyElement);
  function copy(e) {
    var c = e.target.dataset.link;
    copyElement.value = c;
    if (c && copyElement.select) {
      copyElement.style.display = "block";
      copyElement.select();
      try {
        document.execCommand('copy');
        copyElement.blur();
        gsap.fromTo(e.target.parentNode, {color:"white"}, {duration:0.7, color:"#989898"});
      } catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }
      copyElement.style.display = "none";
    }
  }
})();
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js
  9. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js
  11. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EasePack3.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js