I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple effect on their buttons with AnimeJS.
Thank you in advance for your help, I may not be able to respond immediately.
function createRipple(event) {
//Get cursor position
var x = event.pageX,
y = event.pageY;
if ($(".ripple").length > 0) { //Check if there is already a ripple div
//Remove previous ripple
$(".ripple").remove();
$("div.btn").append("<div class='ripple'></div>"); //Add a new div with the class ripple
$(".ripple").css({
"top": y - 20,
"left": x - 20
}); //Position the div at the cursor coordinates
var ripple = anime({ //Ripple Animation
targets: ".ripple",
opacity: {
value: [1, 0],
duration: 2000
},
scale: {
value: 10,
duration: 3000
},
});
$(".ripple").delay(2000).queue(function() {
$(this).remove();
}); //Remove the div after animation ends
} else {
$("div.btn").append("<div class='ripple'></div>"); //Add a new div with the class ripple
$(".ripple").css({
"top": y - 20,
"left": x - 20
}); //Position the div at the cursor coordinates
var ripple = anime({ //Ripple Animation
targets: ".ripple",
opacity: {
value: [1, 0],
duration: 2000
},
scale: {
value: 10,
duration: 3000
},
});
$(".ripple").delay(3000).queue(function() {
$(this).remove();
}); //Remove the div after animation ends
}
}html {
background: #d6d7d8;
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr 2fr;
grid-template-rows: 2fr 1fr 2fr;
}
.btn {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
background: #ff5722;
border-radius: 10px;
box-shadow: 0 10px 20px 4px #aaaaaa;
cursor: pointer;
overflow: hidden;
outline: none;
border: none;
position: relative;
}
.ripple {
pointer-events: none;
position: absolute;
border-radius: 50%;
height: 40px;
width: 40px;
background: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="btn" onclick="createRipple(event)"></div>