BEM styling CSS - can I pass dynamic value in a BEM class

Question

I am coding an animation in React and BEM and have a dynamic animationSpeed which is changed depend on container width:

const Animation = () => {

  const setScrollingSpeed = (nodelist, timePixel, width) => {
    const timePerPixel = timePixel;
    const containerWidth = width;
    nodelist.forEach((element) => {
      const messageWidth = element.offsetWidth;
      const distance = messageWidth + containerWidth;
      const duration = timePerPixel * distance;
      element.style.animationDuration = `${duration}ms`;
    });
  };

  return (
      <div className="scroller-container__ticker-tape">
        ...
      </div>

    </div>
  );
}

How can I pass animationSpeed to scroller-container__ticker-tape class? Is there a way of doing that? Right now I'm doing it like this element.style.animationDuration = ${duration}ms and it's working.

Answer 1

You can't pass JavaScript variables back into CSS, but you can create a variable inside CSS that can then be accessed and set from JavaScript.

See this answer: Declare Variables in CSS - StackOverflow