101 Ways to Animate Things

Use multiple transforms 

<section id="multiple-transforms" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

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

<script src="../../js/components/multiple-transforms.js"></script>
 
<section id="multiple-transforms" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

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

<script src="{{ path '/js/components/multiple-transforms.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("multiple-transforms active");

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

    button.addEventListener('click', function() {
      box.classList.toggle('active');
    })
  });
})();
  • URL: /components/raw/multiple-transforms/multiple-transforms.js
  • Filesystem Path: components/01-basic/08-multiple-transforms/multiple-transforms.js
  • Size: 336 Bytes
  • Content: 
    #multiple-transforms {
  .box {
    transform: scale(1, 1) rotate(0) translate(0, 0);
    transition: transform 1.25s ease-in-out;

    &.active {
      transform: scale(5, 0.5) rotate(900deg) translate(0, -100%);
    }
  }
}
  • URL: /components/raw/multiple-transforms/multiple-transforms.scss
  • Filesystem Path: components/01-basic/08-multiple-transforms/multiple-transforms.scss
  • Size: 226 Bytes
  • Handle: @multiple-transforms
  • Preview:
  • Filesystem Path: components/01-basic/08-multiple-transforms/multiple-transforms.hbs

No notes defined.