0

I am trying to run 3 different animations side by side at the same time. Currently only the first animation is operating and the other 2 are stationary.

Can anyone advise how to run all 3 at once?

Javascript

onload = function startAnimation() {
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    setInterval(function () {
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
    }, 100);
}

HTML

<script src="animate.js"></script>

        <section>
        <div class="row">
            <div class="col-md-4" id="animation">
                <img src="animations/walk/Armature_walk_00.png">
                <img src="animations/walk/Armature_walk_01.png">
                <img src="animations/walk/Armature_walk_02.png">
                <img src="animations/walk/Armature_walk_03.png">
                <img src="animations/walk/Armature_walk_04.png">
                <img src="animations/walk/Armature_walk_05.png">
                <img src="animations/walk/Armature_walk_06.png">
                <img src="animations/walk/Armature_walk_07.png">
                <img src="animations/walk/Armature_walk_08.png">
                <img src="animations/walk/Armature_walk_09.png">
                <img src="animations/walk/Armature_walk_10.png">
                <img src="animations/walk/Armature_walk_11.png">
                <img src="animations/walk/Armature_walk_12.png">
                <img src="animations/walk/Armature_walk_13.png">
                <img src="animations/walk/Armature_walk_14.png">
                <img src="animations/walk/Armature_walk_15.png">
            </div>



            <div class="col-md-4" id="animation">
                <img src="animations/jump/Armature_jump_0.png">
                <img src="animations/jump/Armature_jump_1.png">
                <img src="animations/jump/Armature_jump_2.png">
                <img src="animations/jump/Armature_jump_3.png">
                <img src="animations/jump/Armature_jump_4.png">
                <img src="animations/jump/Armature_jump_5.png">
                <img src="animations/jump/Armature_jump_6.png">
                <img src="animations/jump/Armature_jump_7.png">
                <img src="animations/jump/Armature_jump_8.png">
            </div>



            <div class="col-md-4" id="animation">
                <img src="animations/melt/Melt_1.png">
                <img src="animations/melt/Melt_2.png">
                <img src="animations/melt/Melt_3.png">
                <img src="animations/melt/Melt_4.png">
                <img src="animations/melt/Melt_5.png">
                <img src="animations/melt/Melt_6.png">
                <img src="animations/melt/Melt_7.png">
                <img src="animations/melt/Melt_8.png">
                <img src="animations/melt/Melt_9.png">
                <img src="animations/melt/Melt_10.png">
                <img src="animations/melt/Melt_11.png">
                <img src="animations/melt/Melt_12.png">
                <img src="animations/melt/Melt_13.png">
                <img src="animations/melt/Melt_14.png">
                <img src="animations/melt/Melt_15.png">
            </div>

        </div>
        </section>



CSS

#animation img {
    display: none;
      width: 50%;
      height: auto;

}
#animation img:first-child {
    display: block;
      width: 50%;
      height: auto;
}
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
SGM
  • 3
  • 2
  • Does this answer your question? [JavaScript and getElementById for multiple elements with the same ID](https://stackoverflow.com/questions/3607291/javascript-and-getelementbyid-for-multiple-elements-with-the-same-id) – FluffyKitten Aug 29 '20 at 02:47

1 Answers1

0

You're not supposed to have multiple elements with the same id in a page. You should either give them different ids or give them the same class and use that in your logic. Like this:

<script src="animate.js"></script>

        <section>
        <div class="row">
            <div class="col-md-4 animation">
                <img src="animations/walk/Armature_walk_00.png">
                <img src="animations/walk/Armature_walk_01.png">
                <img src="animations/walk/Armature_walk_02.png">
                <img src="animations/walk/Armature_walk_03.png">
                <img src="animations/walk/Armature_walk_04.png">
                <img src="animations/walk/Armature_walk_05.png">
                <img src="animations/walk/Armature_walk_06.png">
                <img src="animations/walk/Armature_walk_07.png">
                <img src="animations/walk/Armature_walk_08.png">
                <img src="animations/walk/Armature_walk_09.png">
                <img src="animations/walk/Armature_walk_10.png">
                <img src="animations/walk/Armature_walk_11.png">
                <img src="animations/walk/Armature_walk_12.png">
                <img src="animations/walk/Armature_walk_13.png">
                <img src="animations/walk/Armature_walk_14.png">
                <img src="animations/walk/Armature_walk_15.png">
            </div>



            <div class="col-md-4 animation">
                <img src="animations/jump/Armature_jump_0.png">
                <img src="animations/jump/Armature_jump_1.png">
                <img src="animations/jump/Armature_jump_2.png">
                <img src="animations/jump/Armature_jump_3.png">
                <img src="animations/jump/Armature_jump_4.png">
                <img src="animations/jump/Armature_jump_5.png">
                <img src="animations/jump/Armature_jump_6.png">
                <img src="animations/jump/Armature_jump_7.png">
                <img src="animations/jump/Armature_jump_8.png">
            </div>



            <div class="col-md-4 animation" >
                <img src="animations/melt/Melt_1.png">
                <img src="animations/melt/Melt_2.png">
                <img src="animations/melt/Melt_3.png">
                <img src="animations/melt/Melt_4.png">
                <img src="animations/melt/Melt_5.png">
                <img src="animations/melt/Melt_6.png">
                <img src="animations/melt/Melt_7.png">
                <img src="animations/melt/Melt_8.png">
                <img src="animations/melt/Melt_9.png">
                <img src="animations/melt/Melt_10.png">
                <img src="animations/melt/Melt_11.png">
                <img src="animations/melt/Melt_12.png">
                <img src="animations/melt/Melt_13.png">
                <img src="animations/melt/Melt_14.png">
                <img src="animations/melt/Melt_15.png">
            </div>

        </div>
        </section>



CSS

.animation img {
    display: none;
      width: 50%;
      height: auto;

}
.animation img:first-child {
    display: block;
      width: 50%;
      height: auto;
}

And in your js, do:

onload = function startAnimation() {
    var framesContainers = document.getElementsByClassName("animation");
    for (const container of framesContainers) {
       var frames = container.children;
       var frameCount = frames.length;
       var i = 0;
       setInterval(function () {
           frames[i % frameCount].style.display = "none";
           frames[++i % frameCount].style.display = "block";
       }, 100);
    }
}
JayCodist
  • 2,424
  • 2
  • 12
  • 28