# Animation Loops in JavaScript using requestAnimationFrame

**URL:** <https://forum.kirupa.com/t/animation-loops-in-javascript-using-requestanimationframe/648388>\
**Category:** programming\
**Created:** [July 25, 2021, 2:13pm UTC](https://forum.kirupa.com/t/animation-loops-in-javascript-using-requestanimationframe/648388 "2021-07-25T14:13:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Felix\_Meyburgh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/felix_meyburgh/32/11756_2.png) [@Felix\_Meyburgh](https://forum.kirupa.com/u/Felix_Meyburgh)\
**Post date:** [July 25, 2021, 2:13pm UTC](https://forum.kirupa.com/t/animation-loops-in-javascript-using-requestanimationframe/648388/1 "2021-07-25T14:13:06Z")

</div>

Thanks for this well presented video. How would I change the image randomly from an ever growing image folder like a gallery every time the animation starts.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 25, 2021, 5:53pm UTC](https://forum.kirupa.com/t/animation-loops-in-javascript-using-requestanimationframe/648388/2 "2021-07-25T17:53:02Z")

</div>

Do you have a way of getting an up-to-date list of all the images that you can access via JavaScript? 😀

---

<div class="post-metadata">

**Author:** ![Felix\_Meyburgh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/felix_meyburgh/32/11756_2.png) [@Felix\_Meyburgh](https://forum.kirupa.com/u/Felix_Meyburgh)\
**Post date:** [July 25, 2021, 8:26pm UTC](https://forum.kirupa.com/t/animation-loops-in-javascript-using-requestanimationframe/648388/3 "2021-07-25T20:26:21Z")

</div>

The way I’m hoping this will work is that you create a notices on our website which we capture with html2canvas and load them into a gallery folder on the same server as the website. We have a a few div’s “floating” around on our main page using css animation and on the start of every iteration we need a random image to replace the one that had first appeared. So yes we can access these images with Javascript (I think). I tried to combine code from your video with this link ( [How to get random image from directory using PHP - Stack Overflow](https://stackoverflow.com/questions/1761252/how-to-get-random-image-from-directory-using-php)) but can’t seem to get it to work. My knowledge of things beyond html and css is limited.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 26, 2021, 3:04am UTC](https://forum.kirupa.com/t/animation-loops-in-javascript-using-requestanimationframe/648388/4 "2021-07-26T03:04:15Z")

</div>

How are the initial images loaded? Are they hard coded in the HTML? Or are those images specified via some JavaScript?

The reason I ask is that you may be able to accomplish what you are trying to do with just some DOM manipulation and not have to worry about the animation loop 😀

---

<div class="post-metadata">

**Author:** ![Felix\_Meyburgh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/felix_meyburgh/32/11756_2.png) [@Felix\_Meyburgh](https://forum.kirupa.com/u/Felix_Meyburgh)\
**Post date:** [July 26, 2021, 5:59am UTC](https://forum.kirupa.com/t/animation-loops-in-javascript-using-requestanimationframe/648388/5 "2021-07-26T05:59:16Z")

</div>

The images at this stage are in the html. But, because they will be created by a person using my website they will have to be sourced randomly from a folder on the server.

Here is text html with two floating images.

I’ve supplied two extra images for testing.

 TEST \* { margin: 0; padding: 0; } a{color: coral; } a:hover{ color: skyblue; } body { background-color: black; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; } .BG\_wrap { position: fixed; width: 100%; height: 100%; } #BgVideo{ position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; } #floatingNotice1{ width: 320px; height: 577px; position: absolute; opacity: 0.8; animation-name: p1 ; animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: linear; } #floatingNotice1:hover{ opacity: 1; cursor: pointer; } @keyframes p1 { from{transform: scale(0) translate(-800px,2000px)} to{transform: scale(1) translate(1900px,-500px)} } #floatingNotice2{ width: 320px; height: 577px; position: absolute; opacity: 0.8; animation-name: p2; animation-duration: 18s; animation-iteration-count: infinite; animation-timing-function: linear; } #floatingNotice2:hover { opacity: 1; cursor: pointer; } @keyframes p2 { from{transform: scale(.8) translate(2500px,-500px)} to{transform: scale(0) translate(-800px,2000px)} } 

```
<!-- ............................................ FLOATING IMAGES.................................................... -->

```

```
    <div id="floatingNotice1" onclick="floatSelected()"><img src="vista1.jpg" width="100%" height="100%" ></div>
    <div id="floatingNotice2" onclick="floatSelected()"><img src="vista2.jpg" width="100%" height="100%"></div>

```

![sea1|277x500](upload://8sNauSnA95WOkYSo79NT7vkaKo3.jpeg) ![sea7|277x500](upload://wNCdaLSQseIKOgbyX6YHpKkzDMO.jpeg) ![vista1|277x500](upload://7tUg5NI6cGo4jlqnEYTKSEDajN8.jpeg) ![vista2|277x500](upload://A2COyndwndb1dNHXVoaFPWVoOQJ.jpeg)