JSFiddle - React, Tailwind, and code Playground

by lollero

JavaScript

generateMasks: function(){
        var linesCount = animatedPrintHead.getLinesCount();
        var maskOriginal = document.querySelector(".bioink-carousel .slick-current .bioink-carousel__text-mask span")
        var maskHeight = maskOriginal.clientHeight;

        // Loop through as many times as there are lines of text
        for(i=1; i < linesCount; i++){
          var mask = document.createElement("span");
          var maskSet = document.querySelector(".bioink-carousel .slick-current .bioink-carousel__text-mask");

          // Add a new span for each line of text and position it below the previous one
          maskSet.appendChild(mask);
          mask.style.marginTop = i * maskHeight + "px";
        }

        animatedPrintHead.animateMasks(); // Slide out the masks, one after another
      },

      animateMasks: function(){
        var maskSet = document.querySelectorAll(".bioink-carousel .slick-current .bioink-carousel__text-mask span");
        var linesCount = animatedPrintHead.getLinesCount();

        for(i=1; i <= linesCount; i++){
          var currentMask = maskSet[i];
          var pos = 0;
          if ((i % 2) != 1) { // Even
            console.log(currentMask.style);
            setInterval(function(){
              pos++;
              currentMask.style.marginLeft = pos + 'px';
            }, 500);
          }
          else { // Odd

          }
        }
      }