<div class="content"><div id="header">
  <h1>Try Club GSAP Plugins FREE on CodePen</h1>
</div>
  
<p>These URLs point to special trial versions of the <a href="https://greensock.com/club/" target="_blank">Club GSAP</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.12.5/gsap.min.js">Copy URL</button><a class="name" href="https://gsap.com/" target="_blank">GSAP Core</a> <span class="url">https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/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://gsap.com/docs/v3/Eases/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://gsap.com/docs/v3/Eases/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://gsap.com/docs/v3/Plugins/DrawSVGPlugin" 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://gsap.com/docs/v3/Eases" 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://gsap.com/docs/v3/Plugins/InertiaPlugin" 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://gsap.com/docs/v3/Plugins/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://gsap.com/docs/v3/Plugins/MorphSVGPlugin" 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://gsap.com/docs/v3/Plugins/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://gsap.com/docs/v3/Plugins/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://gsap.com/docs/v3/Plugins/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://gsap.com/docs/v3/Plugins/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://gsap.com/docs/v3/Plugins/ScrollSmoother" 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://gsap.com/docs/v3/Plugins/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://gsap.com/pricing" target="_blank">sign up for Club GSAP</a> to get plugins files that run anywhere. Happy tweening!</p>
</div>

<a href="https://gsap.com"><img class="gsap-3-logo" src="https://assets.codepen.io/16327/gsap-logo-light.svg" width="150" /></a>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.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;
  }
}

  .url {
    color: var(--color-surface75)
  }

@media only screen and (max-width: 900px) {
  .url {
    display: none;
  }
}
.gsap-3-logo {
    width: 20vw;
    max-width: 100px;
    position: fixed;
    bottom: 30px;
    right: 30px;
}

//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();
        let button = e.target.parentNode.querySelector('button')
        gsap.fromTo(button, {backgroundColor:"#fffce1"}, {duration:1, backgroundColor:"transparent"});
      } catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }
      copyElement.style.display = "none";
    }
  }
})();