ethereal,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item {
width: 300px;
height: 300px;
background: coral;
padding: 20px;
margin: 20px;
float: left;
}
.item-inner {
width: 260px;
height: 260px;
background: green;
padding: 20px;
}
.item-inner span {
display: block;
}
button {
background: red;
display: block;
margin-left: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script>
$(function() {
$( "button" ).click(function() {
var elements = [];
var parent = document.querySelectorAll('.item .item-inner');
parent.forEach(div => div.querySelectorAll('span').forEach(
(span, i) => elements[i] ? elements[i].push(span) : (elements[i] = [span])
));
elements.forEach((list, i) =>
anime.timeline({loop: false})
.add({
targets: list,
translateX: [0,40],
translateZ: 0,
easing: "easeOutExpo",
duration: 1000,
delay: 100 + 300 * i
}).add({
targets: list,
translateX: [40,0],
easing: "easeInExpo",
duration: 1000,
delay: 100 + 150 * i
}));
});
});
</script>
</head>
<body>
<button>Click!!!</button>
<div class="item">
<div class="item-inner">
<span>text 1</span>
<span>text 2</span>
<span>text 2</span>
</div>
</div>
<div class="item">
<div class="item-inner">
<span>text 1</span>
<span>text 2</span>
<span>text 2</span>
</div>
</div>
<div class="item">
<div class="item-inner">
<span>text 1</span>
<span>text 2</span>
<span>text 2</span>
</div>
</div>
<div class="item">
<div class="item-inner">
<span>text 1</span>
<span>text 2</span>
<span>text 2</span>
</div>
</div>
</body>
</html>
