How to fix the setInterval slow: twinmax and jquery

Question

I'd like to change the picture using TweenMax and J-Query. But It is getting slower than the setInterval set.

I don't have any other settings, I'm only using them to change pictures. And in twinmax, there is no setinterval setting.

start at scale x : 0 on the left and shrink as I pass to the right, so that the background-image behind me changes at the specified time.

The time to change the picture is getting slower. I couldn't upload the picture because I didn't know how to upload it.

I want to convert at the same time, is there a better way? Can I do it with just the css and keyframe?

$(function() {
  var roll = 1;
  setInterval(function() {
    roll++;
    if (roll > 2) {
      roll = 1;
    }
    $("#box1").attr("src", "assets/images/top/pc/main_" + roll + "_b.png");
  }, 4000);
})

$(function() {
  var roll = 1;
  setInterval(function() {
    roll++;
    if (roll > 2) {
      roll = 1;
    }
    $("#box2").attr("src", "assets/images/top/pc/main_" + roll + "_b.png");
  }, 5000);
})

var tl = new TimelineMax({
  repeat: -1,
  repeatDelay: 3
});
tl.from(".layer1", 0.8, {
  scaleX: 0,
  transformOrigin: "left",
  ease: 'expo.inOut'
});
tl.to(".layer1", 0.8, {
  scaleX: 0,
  transformOrigin: "right",
  ease: 'expo.out'
});

var ta = new TimelineMax({
  repeat: -1,
  repeatDelay: 4
});
ta.from(".layer2", 0.8, {
  scaleX: 0,
  transformOrigin: "left",
  ease: 'expo.inOut'
});
ta.to(".layer2", 0.8, {
  scaleX: 0,
  transformOrigin: "right",
  ease: 'expo.out'
});

,
main {
  position: relative;
  width: 100%;
}

.box1 {
  width: 40.4%;
  position: absolute;
  top: 3.7%;
  left: 15%;
}

.box1 img {
  width: 100%;
}

.box2 {
  width: 19.9%;
  position: absolute;
  top: 3.7%;
  left: 56.8%;
}

.box2 img {
  width: 100%;
}

.layer1 {
  background-color: #f85983;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.layer2 {
  background-color: #f85983;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</head>

<body>
  <div class="main">
    <div class="box1">
      <div class="layer1" id="layer1"></div>
      <img id="box1" src="https://imgur.com/98BK2vZ" alt="">
    </div>
    <div class="box2">
      <div class="layer2" id="layer2"></div>
      <img id="box2" src="assets/images/top/pc/main_1_b.png" alt="">
    </div>
  </div>

</body>

</html>

I want to express the change of the image in the back as the pink layer passes through the header part.

I would like to express the same in 5 image boxes.

This site is for reference. I look forward to your kind cooperation.

https://a3-liber.com/index.html

here is sample video!!

https://vimeo.com/567175966

Why do you have multiple document ready event handlers with the same basic code in them? Once should be enough on a given document. `$(function() {` — Mark Schultheiss, Jun 24 '21 at 18:21
It is not really clear what you mean "getting slower" here, you have two different interval periods set `}, 4000);` and `}, 5000);` — Mark Schultheiss, Jun 24 '21 at 18:26
thanks for the comment!! I changed the set interval to 4000 and 5000 because I wanted to change the 5 images at different timing. — katamela, Jun 24 '21 at 18:29
Even if i run #box1 without tweenmax and any other #box, the photo change time is getting slower. — katamela, Jun 24 '21 at 18:35
There's no reason to load the old TweenMax. And it's highly recommended that you use the new syntax. See [the most common GSAP mistakes](https://greensock.com/mistakes/) for more info. — Zach Saucier, Jun 25 '21 at 12:11
by "the photo change time is getting slower" do you mean the interval between or the actual speed of the visual change? - not going to click some link BTW, please explain clearly IN the question. — Mark Schultheiss, Jun 28 '21 at 11:39

score 0 · Answer 1 · answered Jun 24 '21 at 20:30

I've manage to do it parametrizing and calculating the proper animation and slide intervals.

var rollImg = ["https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=",
"https://cdn.leroymerlin.com.br/products/letra_b_11cm_acrilico_preto_kami_acrilicos_89622526_0001_600x600.jpg"];

var layer1Interval = 4000;
var layer2Interval = 5000;
var animationInterval = 1000;
$(function() {
  var roll = 1;
  function rollFnc () {
    setTimeout(function() {
      roll++;
      if (roll > 2) {
        roll = 1;
      }
      $("#box1").attr("src", rollImg[roll - 1]);
      setTimeout(rollFnc, layer1Interval + animationInterval * 1.5);
    }, animationInterval / 2);
  }
  
  rollFnc();
})

var tl = new TimelineMax({
  repeat: -1,
  repeatDelay: (layer1Interval / 1000)
});
tl.from(".layer1", animationInterval / 1000, {
  scaleX: 0,
  transformOrigin: "left",
  ease: 'expo.inOut'
});
tl.to(".layer1", animationInterval / 1000, {
  scaleX: 0,
  transformOrigin: "right",
  ease: 'expo.out'
});

,
main {
  position: relative;
  width: 100%;
}

.box1 {
  width: 40.4%;
  position: absolute;
  top: 3.7%;
  left: 15%;
}

.box1 img {
  width: 100%;
}

.box2 {
  width: 19.9%;
  position: absolute;
  top: 3.7%;
  left: 56.8%;
}

.box2 img {
  width: 100%;
}

.layer1 {
  background-color: #f85983;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.layer2 {
  background-color: #f85983;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</head>

<body>
  <div class="main">
    <div class="box1">
      <div class="layer1" id="layer1"></div>
      <img id="box1" src="https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=" alt="">
    </div>
  </div>

</body>

</html>

Thanks for comment!!! if i more 4layer,,, Would it be okay to use the setinterval several times? — katamela, Jun 25 '21 at 02:03
Scroll, turn off the power on your phone, turn it on, and check, and the pint doesn't fit. how can i fix it? — katamela, Jun 25 '21 at 09:21
Are you working on a browser or some webview mobile platorm/framework like ionic? — Rômulo Bourget Novas, Jun 25 '21 at 12:01
sorry to late for comment!! im using web browser and sellphone!!(android = chrome / iphone = safari) — katamela, Jun 26 '21 at 14:19
When you close your browser and turn it on again, scrolling timing and changing time of picture are different. — katamela, Jun 26 '21 at 14:21
And the same thing happens!! when you turn on the code(run code snippet) you make on your web browser, open another chrome Tab, and go back in. — katamela, Jun 26 '21 at 14:24

How to fix the setInterval slow: twinmax and jquery

1 Answers1