<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--background: #33837e;
--ball: #5de2a3;
--meun: #56be3e;
--white: #ffffff;
}
body {
padding: 0;
margin: 0;
background-color: var(--background);
display: flex;
justify-content: center;
align-items: center;
100%;
height: 100vh;
}
.container {
height: 150px;
border-radius: 30px;
padding: 0px 50px;
box-sizing: border-box;
background-color: var(--white);
}
.wrapper {
360px;
height: 100%;
display: flex;
position: relative;
overflow: hidden;
}
.wrapper-menu {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
40px;
color: var(--meun);
z-index: 99;
}
.wrapper-ball {
360px;
padding: 20px;
box-sizing: border-box;
position: absolute;
bottom: -50px;
}
.ball {
position: absolute;
80px;
height: 80px;
border-radius: 50%;
background-color: var(--ball);
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="wrapper-menu">
<svg xmlns="http://www.w3.org/2000/svg" class="menu menu-box" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
</svg>
</div>
<div class="wrapper-menu">
<svg xmlns="http://www.w3.org/2000/svg" class="menu menu-home" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</div>
<div class="wrapper-menu">
<svg xmlns="http://www.w3.org/2000/svg" class="menu menu-calendar" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="wrapper-ball">
<div class="ball"></div>
</div>
</div>
</div>
</body>
<script src="./js/anime.js"></script>
<script>
document.querySelector(".menu-box").addEventListener('click', function (e) {
move(0, '.menu-box')
});
document.querySelector(".menu-home").addEventListener('click', function (e) {
move(120, '.menu-home');
});
document.querySelector(".menu-calendar").addEventListener('click', function (e) {
move(240, '.menu-calendar');
});
function move(x, target) {
var tl = anime.timeline({
targets: '.ball'
});
tl
.add({
translateX: x,
duration: 500,
easing: 'easeInOutQuad',
begin: function (anim) {
document.querySelector('.container').style.transform = 'scale(1.02)';
},
})
.add({
translateY: -84,
duration: 1200,
begin: function (anim) {
console.log(anim);
document.querySelector(target).style.color = 'white'
},
complete: function (anim) {
document.querySelector(target).style.color = '#56be3e'
}
})
.add({
translateY: 0,
duration: 500,
easing: 'easeInOutQuart',
complete: function (anim) {
document.querySelector('.container').style.transform = 'scale(1)';
}
});
}
</script>
</html>
https://www.animejs.cn/documentation/#pennerFunctions
https://codepen.io/shahidshaikhs/pen/poWbyMb