Login
Animations

Title Animation

09 Nov 2022

Цікава анімація, яка відбувається під час появи заголовку в полі зору. Завдяки JavaScript анімується кожна буква заголовку
HTML
SCSS
JS 
                            <h2 class="title">Who we are</h2>
                        
                            .title {
  color: var(--white);
  
  span {
    display: inline-block;
    opacity: 0;
    transform: translateY(4em);
    transition: transform 0.2s ease-in-out, opacity 0.6s ease-in-out;
  }

  &.show {
    span {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
                        
                            // Titles animation
const allTitles = [...document.getElementsByClassName(`title`)];

if (allTitles.length > 0) {
    // Observer
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("show")
        }
      })
    }, {threshold: 0.3});

    for (let i = 0; i < allTitles.length; i++) {

      // Show titles
      observer.observe(allTitles[i]);

      const wordArr = allTitles[i].textContent.trim().split(" ");
      allTitles[i].innerHTML = '';

      const spanArr = [];

      wordArr.forEach(elem => {
        const span = document.createElement("span");
        span.innerHTML = `${elem}`;
        spanArr.push(span);
      })

      let accum = 0;

      for (let j = 0; j < spanArr.length; j++) {

        const spanFather = document.createElement("span");
        const letterArr = spanArr[j].innerText.trim().split("");

        if (j > 0) accum += spanArr[j - 1].innerText.length;

        for (let k = 0; k < letterArr.length; k++) {
          const span = document.createElement("span");

          span.innerHTML = letterArr[k];

          span.style.cssText = `transition-delay: ${(accum + k) * 100}ms`;

          spanFather.append(span);
        }

        const span = document.createElement("span");
        span.innerHTML = ' ';
        spanFather.append(span);
        allTitles[i].append(spanFather);
      }
    }
0