Random motion Anime.js
Bit new to JS based animation. Tries to create a random bubble effect using anime.js. However, when the animation loops follow the same randomly generated parameters, unless the page is reloaded.
I entered the code into this script:
https://jsfiddle.net/3ss3c5ma/7/
Any help / advice is greatly appreciated!
thank
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
});
});
source to share
Late answer - but I'm starting with anime.js now and see your question. The problem with your code is that you set the timeline once - and set 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 start the animation from scratch every time it finishes. Here's a fork of your example:
https://jsfiddle.net/4879trjv/1/
I needed to add a start position to your targets at the start of each animation, otherwise your targets would be lost in the eternity of your viewport; -)
source to share