I'm experimenting with creating a ripple effect using Anime.js on an array of dots forming circles. Despite trying various methods, I can't seem to achieve the desired result. Does anyone have any suggestions on how I can make it work?
Here's the code I've written so far. You can view the animation section at the bottom of this CodePen. I want the ripple effect to look like what's demonstrated in this example, but I'm having trouble implementing it in my current context.
var container = document.getElementById('container');
var numberOfDots = 512;
var numberOfCircles = 8;
var dotsPerCircle = numberOfDots / numberOfCircles;
var circles = [];
function createDot(i, circleDepth) {
var rotation = (360 / dotsPerCircle) * i;
var height = "calc( 30% + " + (circleDepth * 10) + "px)";
var container = document.createElement('div');
container.classList = 'dot';
container.style.height = height;
container.style.transform = 'rotate(' + rotation + 'deg) translateY(-50%)';
var dot = document.createElement('span');
container.appendChild(dot);
return container;
}
function createCircle(circleDepth) {
var dotArray = [];
for (var i = 1; i <= dotsPerCircle; i++) {
var dot = createDot(i, circleDepth);
container.appendChild(dot);
dotArray.push(dot.querySelector('span'));
}
return dotArray;
}
for (var i = 1; i <= numberOfCircles; i++) {
circles.push(createCircle(i));
}
// Animation
var duration = 6000;
var delay = duration / numberOfDots;
var myTimeline = anime.timeline({
complete: function() { myTimeline.restart(); }
});
for (var i = 0; i < circles.length; i++) {
var dotArray = circles[i];
myTimeline.add({
targets: dotArray,
easing: 'easeInOutSine',
direction: 'alternate',
duration: duration * .1,
scale: [
{value: 1.6, easing: 'spring(1, 80, 10, 0)', duration: 1000},
{value: 1, easing: 'spring(1, 80, 10, 0)', duration: 1000}
],
}, "-=990")
}