Order Button Animation Using HTML
CSS And JavaScript
Codepen link = 
HTML
$('.btn-order').click(()=> {
const timeline = anime.timeline({
easing: 'easeInSine',
})
timeline.add({
targets: '.btn-order .default',
opacity: [1, 0],
duration: 200
})
timeline.add({
targets: '.btn-order',
height: ['50px', '6px'],
duration: 400
})
timeline.add({
targets: '.car',
opacity: [0, 1]
}, '-=600')
timeline.add({
targets: '.box',
translateX: [0, '210px'],
duration: 300
})
timeline.add({
targets: '.box',
translateY: [0, '90px'],
duration: 300
})
timeline.add({
targets: '.light',
opacity: [0, 1],
duration: 200
})
timeline.add({
targets: '.car',
translateX: [0, '130px'],
duration: 800,
easing: 'easeInQuart',
})
timeline.add({
targets: '.car',
opacity: [1, 0]
}, '-=600')
timeline.add({
targets: '.btn-order',
height: ['6px', '50px'],
duration: 400
})
timeline.add({
targets: '.btn-order .complited',
opacity: [0, 1],
duration: 200
})
timeline.add({
targets: '.complited svg',
strokeDashoffset: ['16px', 0],
duration: 300
})
})
CSS
main {
width: 600px;
height: 600px;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
background: #afc0f2;
}
.car {
position: absolute;
bottom: calc(100% - 5px);
left: 0;
opacity: 0;
}
svg {
width: 72px;
}
button {
width: 200px;
height: 50px;
background: #20274a;
border: none;
border-radius: 25px;
position: relative;
color: #fff;
font-weight: 500;
cursor: pointer;
font-size: 16px;
}
button:focus {
outline: none;
}
.light {
position: absolute;
opacity: 0;
width: 3px;
height: 3px;
right: 0;
top: 20px;
background: yellow;
}
.light:before {
content: '';
position: absolute;
width: 15px;
height: 5px;
top: 4px;
left: 0;
background: linear-gradient(to right, #ffeb00, #ffeb003d);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
transform: rotate(45deg);
}
.complited {
position: absolute;
top: 16px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
left: 0;
opacity: 0;
}
.complited svg {
width: 12px;
height: 10px;
fill: none;
margin: 0 0 0 4px;
stroke: #16BF78;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
}
JS
$('.btn-order').click(()=> {
const timeline = anime.timeline({
easing: 'easeInSine',
})
timeline.add({
targets: '.btn-order .default',
opacity: [1, 0],
duration: 200
})
timeline.add({
targets: '.btn-order',
height: ['50px', '6px'],
duration: 400
})
timeline.add({
targets: '.car',
opacity: [0, 1]
}, '-=600')
timeline.add({
targets: '.box',
translateX: [0, '210px'],
duration: 300
})
timeline.add({
targets: '.box',
translateY: [0, '90px'],
duration: 300
})
timeline.add({
targets: '.light',
opacity: [0, 1],
duration: 200
})
timeline.add({
targets: '.car',
translateX: [0, '130px'],
duration: 800,
easing: 'easeInQuart',
})
timeline.add({
targets: '.car',
opacity: [1, 0]
}, '-=600')
timeline.add({
targets: '.btn-order',
height: ['6px', '50px'],
duration: 400
})
timeline.add({
targets: '.btn-order .completed',
opacity: [0, 1],
duration: 200
})
timeline.add({
targets: '.completed svg',
strokeDashoffset: ['16px', 0],
duration: 300
})
})
0 Comments