Web Animation API: OOP class value of translateX is undefined

Question

I am making a simple animation with JavaScript. I used Animation class from Web Animation API. I just want to create few more instance of that class and want to animate different element with different value and replace transform value of translateX. I have setup my constructor I just want to dynamically pass the value to translateX;

Here is my full project

JavaScript File

// https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010
const car = document.getElementById("car");

// CAR ANIMATION
class CarAnimate {
    constructor(tFormXStart , tFormYStart, tFormXStop, tFormYStop, startOpacity, stopOpacity) {
        this.tFormXStart = tFormXStart;
        this.tFormYStart = tFormYStart;
        this.tFormXStop = tFormXStop;
        this.tFormYStop = tFormYStop;
        this.startOpacity = startOpacity;
        this.stopOpacity = stopOpacity;
    }
carRightKeyframes = new KeyframeEffect(
        car,
        [
            {
                // WANT TO SET THE VALUE OF TRANSLATE X DYNAMICALLY
                //HELP IF YOU CAN
                transform:'translateX('+this.tFormXStart+'%)', // HERE IT SHOWING VALUE IS UNDEFINED
            },
            {
                transform: 'translateX('+this.tFormXStop+'%)',
            }
        ], {
            duration: 3000,
            fill: 'forwards',
            iterations: Infinity
        },  

    );

carRightAnimation = new Animation(this.carRightKeyframes, document.timeline);
    start() {            

        this.carRightAnimation.play();
    }
}

//FROM HERE I WANT TO SET THE FIRST AND THIRD PARAMETERS TO BE WORK
const carAnimate =new CarAnimate(0, 0, 100, 0,0, 1);
carAnimate.start();

Answer 1

I had to put the declarations into the click listener on my project, here is the code on codepen.

  // give a starting value for the transformation
var slideBarWidth = 0,
  slideBarScalePoint = 0,
  currentStep = 1,
  dot = document.querySelector(".progress__dot"),
  boxWidth,
  newWidth,
  elementsCount = document.getElementsByClassName("progress__steps")[0].children
    .length,
  boxDivider = elementsCount - 1;

// insert the current step number into the progress dot
dot.textContent = currentStep;

// define the timing for progress dot
var dotTiming = {
  duration: 500,
  fill: "both",
  easing: "ease-in-out"
};
// define the timing for sliding bar
var barTiming = {
  duration: 500,
  fill: "both",
  easing: "ease-in-out"
};
var passedTiming = {
  fill: "both"
};

function checkSize() {
  newWidth = dot.parentElement.offsetWidth;
  if (newWidth !== boxWidth) {
    resizeSteps();
  }
}

// on window.resize reassign the position of the slider bar and the progress dot.
function resizeSteps() {
  setWidth();
  var resetDot = [
    {
      transform:
        "translateX(" +
        ((boxWidth / boxDivider) * (currentStep - 2) - dot.offsetWidth / 2) +
        "px)"
    },
    {
      transform:
        "translateX(" +
        ((boxWidth / boxDivider) * (currentStep - 1) - dot.offsetWidth / 2) +
        "px)"
    }
  ];

  var reslideBar = [
    {
      width: (boxWidth / boxDivider) * (currentStep - 2) + "px",
      transformOrigin: "left"
    },
    {
      width: (boxWidth / boxDivider) * (currentStep - 1) + "px",
      transformOrigin: "left"
    }
  ];

  var reslidingBar = document
    .querySelector(".progress__fill")
    .animate(reslideBar, barTiming);

  var resettingDot = document
    .querySelector(".progress__dot")
    .animate(resetDot, dotTiming);
}

function setWidth() {
  // count the number of elements in the progress steps div and set up the sizing accordingly
  document
    .getElementsByClassName("progress__container")[0]
    .classList.add("progress__container--" + elementsCount + "step");

  boxWidth = dot.parentElement.offsetWidth;

  startDot();
}

function startDot() {
  // set the initial position of the progress dot
  document
    .querySelector(".progress__dot")
    .setAttribute(
      "style",
      "transform: translateX(-" + dot.offsetWidth / 2 + "px);"
    );
  slideElements();
}

function slideElements() {
  // position the elements across the slider bar
  for (var element = 0; element < elementsCount; element++) {
    document
      .getElementsByClassName("progress__element")
      [element].setAttribute(
        "style",
        "left:" + (boxWidth / boxDivider) * element + "px"
      );
    document
      .getElementsByClassName("progress__element")
      [element].classList.add("progress__element--step" + (element + 1));
  }
  // make the first current name bold
  document
    .querySelector(".progress__element--step" + currentStep + " .stepName")
    .classList.add("bold");
}

document.addEventListener("DOMContentLoaded", setWidth);
window.addEventListener("resize", checkSize);

// on click fire the animation
document.getElementById("next").addEventListener("click", function() {
  // make sure the slider does not go further than it should
  if (currentStep > boxDivider) {
    return;
  }

  // define the keyframes for the progress dot
  if (currentStep == 1) {
    var moveDot = [
      {
        transform: "translateX(-" + dot.offsetWidth / 2 + "px)"
      },
      {
        transform:
          "translateX(" +
          ((boxWidth / boxDivider) * currentStep - dot.offsetWidth / 2) +
          "px)"
      }
    ];
  } else {
    var moveDot = [
      {
        transform:
          "translateX(" +
          ((boxWidth / boxDivider) * (currentStep - 1) - dot.offsetWidth / 2) +
          "px)"
      },
      {
        transform:
          "translateX(" +
          ((boxWidth / boxDivider) * currentStep - dot.offsetWidth / 2) +
          "px)"
      }
    ];
  }

  // define the keyframes for the sliding bar
  var slideBar = [
    {
      width: (boxWidth / boxDivider) * (currentStep - 1) + "px",
      transformOrigin: "left"
    },
    {
      width: (boxWidth / boxDivider) * currentStep + "px",
      transformOrigin: "left"
    }
  ];
  var showDot = [
    { backgroundColor: "#fff", border: "2px solid #B5ADAD" },
    { backgroundColor: "#A93E00", border: "2px solid #A93E00" }
  ];

  // putting the keyframes and timings together (progress dot)
  var movingDot = document
    .querySelector(".progress__dot")
    .animate(moveDot, dotTiming);

  // putting the keyframes and timings together (sliding bar)
  var slidingBar = document
    .querySelector(".progress__fill")
    .animate(slideBar, barTiming);
  var passingDot = document
    .querySelector(".progress__element--step" + currentStep + " .circ")
    .animate(showDot, passedTiming);

  // making the animation play forwards
  movingDot.playbackRate = 1;
  slidingBar.playbackRate = 1;
  passingDot.playbackRate = 1;

  // starting the animations
  movingDot.play();
  slidingBar.play();
  movingDot.onfinish = passingDot;

  // incrementing and setting the step counter
  currentStep++;
  document.querySelector(".progress__dot").textContent = currentStep;

  if (currentStep > 1) {
    document.getElementById("back").classList.add("is-active");
  }
  if (currentStep > boxDivider) {
    document.getElementById("next").classList.remove("is-active");
  }

  // toggling the bold class for the step names
  document
    .querySelector(
      ".progress__element--step" + (currentStep - 1) + " .stepName"
    )
    .classList.remove("bold");

  setTimeout(function() {
    document
      .querySelector(".progress__element--step" + currentStep + " .stepName")
      .classList.add("bold");
  }, 400);
});

document.getElementById("back").addEventListener("click", function() {
  // make sure the slider does not go back past the beginning
  if (currentStep < 2) {
    return;
  }

  var moveDot = [
    {
      transform:
        "translateX(" +
        ((boxWidth / boxDivider) * (currentStep - 2) - dot.offsetWidth / 2) +
        "px)"
    },
    {
      transform:
        "translateX(" +
        ((boxWidth / boxDivider) * (currentStep - 1) - dot.offsetWidth / 2) +
        "px)"
    }
  ];

  var slideBar = [
    {
      width: (boxWidth / boxDivider) * (currentStep - 2) + "px",
      transformOrigin: "left"
    },
    {
      width: (boxWidth / boxDivider) * (currentStep - 1) + "px",
      transformOrigin: "left"
    }
  ];
  var showDot = [
    { backgroundColor: "#A93E00", border: "2px solid #A93E00" },
    { backgroundColor: "#fff", border: "2px solid #B5ADAD" }
  ];

  // putting the keyframes and timings together
  var movingDot = document
    .querySelector(".progress__dot")
    .animate(moveDot, dotTiming);

  var slidingBar = document
    .querySelector(".progress__fill")
    .animate(slideBar, barTiming);

  var passingDot = document
    .querySelector(".progress__element--step" + currentStep + " .circ")
    .animate(showDot, passedTiming);

  // making the animation reverse
  movingDot.playbackRate = -1;
  slidingBar.playbackRate = -1;
  passingDot.playbackrate = -1;

  // starting the animation
  movingDot.play();
  slidingBar.play();
  movingDot.onfinish = passingDot;

  // decrementing and setting the step counter
  currentStep--;

  // set the current step number as the number in the progress dot on the page
  document.querySelector(".progress__dot").textContent = currentStep;

  if (currentStep < elementsCount) {
    document.getElementById("next").classList.add("is-active");
  }
  if (currentStep < 2) {
    document.getElementById("back").classList.remove("is-active");
  }

  // ('.progress__element--step' + currentStep + ' .stepName')
  // toggling the bold class for the step names
  document
    .querySelector(
      ".progress__element--step" + (currentStep + 1) + " .stepName"
    )
    .classList.remove("bold");

  setTimeout(function() {
    document
      .querySelector(".progress__element--step" + currentStep + " .stepName")
      .classList.add("bold");
  }, 400);
});