I've been trying to build this animation with three palm leaves gently swaying as a background for a website, but it needs to run as smoothly as possible without messing with the page loading time too much. I'm pretty new to js so the code I've got at the moment is probably not optimal,

Therefore I am asking if I could get some suggestions on how I could optimize the code to make it run better and faster. What do you think?

this is the code right now

  const background = document.querySelector(".leaf-background");

  const leafs1 = document.createElement("div");
  const leafs2 = document.createElement("div");
  const leafs3 = document.createElement("div");

  leafs1.classList.add("leaf-1");
  leafs2.classList.add("leaf-2");
  leafs3.classList.add("leaf-3");

  background.appendChild(leafs1);
  background.appendChild(leafs2);
  background.appendChild(leafs3);

  let animateLeafs1 = () => {
    anime({
      targets: ".leaf-1",
      rotateZ: () => {
        return anime.random(-5, 5);
      },
      rotateX: () => {
        return anime.random(-30, 30);
      },
      easing: "linear",
      duration: 3000,
      complete: animateLeafs1
    });

  };
  animateLeafs1();

  let animateLeafs2 = () => {
    anime({
      targets: ".leaf-2",
      //rotateZ: () => {
      //  return anime.random(-5, 5);
      //},
      rotateX: () => {
        return anime.random(40, -40);
      },
      easing: "linear",
      duration: 4000,
      complete: animateLeafs2
    });

  };
  animateLeafs2();

  let animateLeafs3 = () => {

    anime({
      targets: ".leaf-3",
      rotateZ: () => {
        return anime.random(-2, 2);
      },
      rotateX: () => {
        return anime.random(30, -30);
      },
      easing: "linear",
      duration: 4000,
      complete: animateLeafs3
    });

  };
  animateLeafs3();

CodePudding user response：

does this work? i cant even test it

        const background = document.querySelector(".leaf-background");
        const leafArray = []
      // array starts from 0
        for(var i=0; i<3;i  ){
          leafArray[i]= document.createElement("div");
          // remember that classes start from 0 ---> leaf-0, leaf-1 , leaf-2
          leafArray[i].classList.add("leaf-"   i);
          // add a common class for selector
          leafArray[i].classList.add("generalLeafs")
          background.appendChild(leafArray[i]);
        }
        console.log(leafArray);
        let animateLeafs = () => {
          anime({
            targets: ".generalLeafs",
            rotateZ: () => {
              return anime.random(-5, 5);
            },
            rotateX: () => {
              return anime.random(-30, 30);
            },
            easing: "linear",
            duration: 3000,
            complete: animateLeafs
          });
      
        };
        animateLeafs();

start you class names from 0