title: cpu intense js animation, can it be the setInterval?
body: <p>I'm making a simple background animation: basically I'd like to have 3 shapes smoothly bouncing around the screen. my reference is the well-known &quot;dvd screensaver effect&quot;.</p>
  <p>Starting from <a href="https://youtu.be/wMIARRCox9k" rel="nofollow noreferrer">this tuorial</a> I built my version with 3 pngs bouncing around and this is the result.</p>
  <p>The problem is that when I run it I've noticed that my laptop fans immediately starts to run and sometimes it jerks, since I wanted to add this effect to a website I'm making (with some other content already), I'm afraid the animation would be even more laggy.</p>
  <p>I wanted to ask you if you recommend any way, to make this animation run smoother and less cpu intense. I was wondering if the problem could be se function setInterval and if there could be some other function lighter for the cpu to run.</p>
  <p>I've tried also to reduce the png size or use svg but I guess that the blur effect on the svg made the animation even more heavy</p>
  <p>Thank you!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const section = document.querySelector(".bg-animation");
    const logo = document.querySelector(".shape-bg-1");
    const logo2 = document.querySelector(".shape-bg-2");
    const logo3 = document.querySelector(".shape-bg-3");
  
    const FPS = 60;
  
    var widthLimite = $('.bg-animation').outerWidth();
    var heightLimite = $('.bg-animation').outerHeight();
  
    section.style.height = heightLimite;
    section.style.width = widthLimite;
  
    // Logo moving velocity Variables
    let xPosition = 10;
    let yPosition = 10;
  
    let x2Position = 20;
    let y2Position = 30;
  
    let x3Position = 70;
    let y3Position = 20;
  
    $(".shape-bg-1").css('opacity',1);
    $(".shape-bg-2").css('opacity',1);
    $(".shape-bg-3").css('opacity',1);
  
  
    //velocità
    let xSpeed = 0.8;
    let ySpeed = 0.8;
  
    let x2Speed = 0.9;
    let y2Speed = 0.6;
  
    let x3Speed = 0.7;
    let y3Speed = 0.9;
  
    function update() {
      logo.style.left = xPosition + "px";
      logo.style.top = yPosition + "px";
  
      logo2.style.left = x2Position + "px";
      logo2.style.top = y2Position + "px";
  
      logo3.style.left = x3Position + "px";
      logo3.style.top = y3Position + "px";
    }
  
    setInterval(() =&gt; {
      if (xPosition + logo.clientWidth &gt;= widthLimite || xPosition &lt;= 0) {
        xSpeed = -xSpeed;
      }
      if (yPosition + logo.clientHeight &gt;= heightLimite || yPosition &lt;= 0) {
        ySpeed = -ySpeed;
      }
      //shape2
      if (x2Position + logo2.clientWidth &gt;= widthLimite || x2Position &lt;= 0) {
        x2Speed = -x2Speed;
      }
      if (y2Position + logo2.clientHeight &gt;= heightLimite || y2Position &lt;= 0) {
        y2Speed = -y2Speed;
      }
      //shape3
      if (x3Position + logo3.clientWidth &gt;= widthLimite || x3Position &lt;= 0) {
        x3Speed = -x3Speed;
      }
      if (y3Position + logo3.clientHeight &gt;= heightLimite || y3Position &lt;= 0) {
        y3Speed = -y3Speed;
      }
  
      xPosition += xSpeed;
      yPosition += ySpeed;
  
      x2Position += x2Speed;
      y2Position += y2Speed;
  
      x3Position += x3Speed;
      y3Position += y3Speed;
  
      update();
    }, 1000 / FPS);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  .container {
    padding:0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    font-family: 'arial','helvetica',sans-serif;
    font-weight: 400;
    font-size: 42px;
    color: white;
    mix-blend-mode: difference;
  }
  .home-bg-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
  }
  .bg-animation {
    width: 150%;
    height: 150%;
    position: absolute;
  }
  .shape-bg-1,
  .shape-bg-2, 
  .shape-bg-3 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 80vw;
    opacity: 0;
    mix-blend-mode: difference;
    transition: opacity 1s ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="home-bg-container"&gt;
        &lt;div class="bg-animation"&gt;
          &lt;img class="shape-bg-1" src="https://i.ibb.co/HgpGbh4/shape1-min.png" alt=""&gt;
          &lt;img class="shape-bg-2" src="https://i.ibb.co/Pm6bmHj/shape2-min.png" alt=""&gt;
          &lt;img class="shape-bg-3" src="https://i.ibb.co/NCrH4GJ/shape3-min.png" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;p class="title"&gt;SOME TEXT&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>