Menu
Bit of a beginner at JS based animation. Trying to create a bubble effect with random movement using anime.js. However, when the animation loops it follows the same randomly generated parameters unless the page is reloaded.
I've put the code into this fiddle:
https://jsfiddle.net/3ss3c5ma/7/
Any help/advice is much appreciated!
Thanks
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="animatebubbles" class="container">
<h1>Test Page</h1>
<div class="bubblewrapper">
<div class="bubblepath">
<div id="bubble1" class="bubble">
</div>
</div>
<div class="bubblepath">
<div id="bubble2" class="bubble">
</div>
</div>
<div class="bubblepath">
<div id="bubble3" class="bubble">
</div>
</div>
<div class="bubblepath">
<div id="bubble4" class="bubble">
</div>
</div>
</div>
</div>
<footer>
<script type="text/javascript" src="anime.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
</footer>
</body>
</html>
CSS:
body {
height: 100%;
margin: 0;
}
h1 {
font-size: 40px;
color: #fff;
margin: 0;
display: inline-block;
position: absolute;
}
.container {
width: 100%;
background-color: #206ca0;
height: 100%;
text-align: center;
}
.bubblewrapper {
display: block;
position: absolute;
left: 0;
height: 100%;
width: 300px;
}
.bubblepath {
height: 100%;
padding: 0 1px;
display: table-cell;
width: 60px;
}
.bubble {
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
}
Javascript:
var randomMovement = function() {
return anime.random(-20, 20) + 'rem'
};
var randomSpeed = function() {
return anime.random(1000, 5000) + 'rem'
};
$(document).ready(function(){
var timelineParameters = anime.timeline({
loop: true
});
timelineParameters
.add({
targets: '#bubble1',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ {value: 0.5 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed
})
.add({
targets: '#bubble2',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ { value: 0.8 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed,
offset: 100
})
.add({
targets: '#bubble3',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ { value: 0.3 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed,
offset: 0
})
.add({
targets: '#bubble4',
translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
opacity: [ { value: 0.8 }, { value: 0 }],
easing: 'linear',
duration: randomSpeed,
offset: 300
});
});
736
asked Oct 28 '25 15:10
Late answer - but I am currently beginning with anime.js and saw your question. The problem with your code is, that you set the timeline once - and than it's set to the same values for all iterations in the loop.
You need to do something like this:
$(document).ready(function(){
animation();
});
function animation() {
var timeline = anime.timeline({loop: false}); // no loop !!
timeline
.add({...})
.add({...})
.add({...});
timeline.complete = function() {animation();};
}
This way you initiate your animation from the scratch each time it completes. Here is a fork of your example:
https://jsfiddle.net/4879trjv/1/
I had to add an initial position to your targets at the start of each animation - otherwise your targets would get lost in the eternity of your viewport ;-)
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
