Controlling CSS animation with vanilla JavaScript

Question

I'm trying to write a reusable JS function which controls CSS animation on a number of shapes. I will do my best to explain what I'm trying to achieve.

The goal is to control a few things:

• param1 : Quantity of li elements(shapes) being generated
• param2 and param3 : Range of numbers for a random duration of the animation for each generated shape
• param4 and param5 : Range of numbers for a random left-margin for each generated shape

I want to be able to use this function on different pages of a website. For example, I want to have the shapes as part of the whole background on the main page but on another page create a pillar of animated shapes next to some text content.

HTML

<ul id="bg_list">
</ul>

CSS

:root {
  --animation-duration: 2s;
  --margin-left: 5px; 
}

#bg_list {
  position: absolute;
  top: 0;
  left: 0;
  overflow: none;
  width: 80%;
  height: 92%;
}


#bg_list li {
  position: absolute;
  display: inline-block;
  list-style: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(27, 23, 49, 0.5);
  bottom: -10px;
  overflow: none;
  animation: animate var(--animation-duration) linear infinite;
  margin-left: var(--margin-left);
  z-index: -1;
}


@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 0.2;
      border-radius: 0;
  }
  50% {
    opacity: 0.5;
  }
  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 1;
      border-radius: 50%;
  }
}

JS

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");
  var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
  var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);

  for(let i = 0; i < x; i++) {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.style.setProperty('--animation-duration', duration + 's');
    li.style.setProperty('--margin-left', margin + 'px');
  }
}

bgTriangles(5, 20, 10, 500, 5);

The above code mostly works which you can see by refreshing the page however I'm not getting the expected number of shapes and it seems they are stacked on top of each other, instead of getting a randomized animation each.

Here's a demo of it: pen

Answer 1

You're doing it almost right, with one little exception: your random numbers are calculated once before the loop, and every triangle gets same duration and margin. Here is how to modify your code to make it work:

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");

  for(let i = 0; i < x; i++) {
    var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
    var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);
    var li = document.createElement("li");
    ul.appendChild(li);
    li.style.setProperty('animation-duration', duration + 's');
    li.style.setProperty('margin-left', margin + 'px');
  }
}

To make it clear. I have moved following two lines:

var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);

They are inside the loop now, at the very start of it. No other changes required.

And here is you pen updated: https://codepen.io/anon/pen/RzVVmm