Pattern Library by Cloudy knot

Moving Text 

<main class="main-wrapper">
    <p id="js-anime-target" class="move-text">A new production Hello...</p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
    <script src="../../js/vendor/moving-text.js"></script>
</main>
 
<main class="main-wrapper">
  <p id="js-anime-target" class="move-text">A new production Hello...</p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
  <script src="{{ path '/js/vendor/moving-text.js' }}"></script>
</main>
 
/* No context defined. */
  • Content: 
    moveLetter();
function moveLetter() {
  const textWrapper = document.querySelector('#js-anime-target');
  textWrapper.innerHTML = textWrapper.textContent.replace(/(\S|\s)/g, '<span class="letter">$&</span>');
  setTimeout(() => {
      textWrapper.style.opacity = 1;
  }, 300);


  // eslint-disable-next-line no-undef
  anime.timeline({loop: false})
    .add({
      targets: '#js-anime-target .letter',
      translateX: [40,0],
      translateZ: 0,
      opacity: [0,1],
      easing: "easeOutQuad",
      duration: 1000,
      delay: (el, i) => 500 + 30 * i
  });
}
  • URL: /components/raw/moving-text/index.js
  • Filesystem Path: src/components/5-effect/moving-text/index.js
  • Size: 569 Bytes
  • Content: 
    .move-text {
  text-transform: uppercase;
  line-height: 5rem;
  font-size: calc(var(--font-size-h) + .05rem);
  font-style: italic;
  font-weight: bold;
  opacity: 0;
  transform: scaleY(1.2);
}

.move-text .letter {
  display: inline-block;
  min-width: 1.1rem;
  letter-spacing: .5em;
  opacity: 1;
}
  • URL: /components/raw/moving-text/style.css
  • Filesystem Path: src/components/5-effect/moving-text/style.css
  • Size: 303 Bytes

No notes defined.