101 Ways to Animate Things

Gsap Basic 

<section id="gsap-basic" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="../../js/components/gsap-basic.js"></script>
 
<section id="gsap-basic" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="{{ path '/js/components/gsap-basic.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("gsap-basic active");

    const button = document.querySelector('#trigger');
    const box = document.querySelector('#box');

    button.addEventListener('click', function () {
      gsap.to("#box", {
        duration: 1,
        x: 300,
        y: 10,
        rotation: 145,
        opacity: 0.15,
        ease: "back.inOut"
      });
    })
  });
})();
  • URL: /components/raw/gsap-basic/gsap-basic.js
  • Filesystem Path: components/04-gsap/01-gsap-basic/gsap-basic.js
  • Size: 449 Bytes

No notes defined.