it is possible made code bellow using only Web Animations API? I don't like use included library, so I try use Web Animations API, but I can't find how Can I created one animations which include few elements.
var tl = anime.timeline({
easing: 'linear',
loop: true
});
tl
.add({
targets: '.button-scroll-icon',
height: ["100%", "0%"],
duration: 500
})
.add({
targets: '.button-scroll-icon',
opacity: [1, 0],
duration: 10
})
.add({
targets: '.button-scroll-icon',
height: ["0%", "100%"],
duration: 10
})
.add({
targets: '.button-scroll-wheel',
translateY: 15,
opacity: [1, 0],
duration: 500
}, '-=520')
.add({
targets: '.button-scroll',
translateY: 10,
duration: 500
}, '-=520')
.add({
targets: '.button-scroll-text',
opacity: [1, 0.5],
duration: 500
}, '-=520')
.add({
targets: '.button-scroll',
translateY: 0,
duration: 500
})
.add({
targets: '.button-scroll-icon',
opacity: [0, 1],
duration: 500
}, '-=500')
.add({
targets: '.button-scroll-text',
opacity: [0.5, 1],
duration: 500
}, '-=500');