Answer the question
In order to leave comments, you need to log in
Animejs and promises. How to do a restart?
I am writing a custom slider, using the animejs library in the code.
timeLine - a line showing how much is left before the slide change.
function timing should return true when executed, this is what I did, but now when I try to get an animeTiming object to restart the animation on buttonNext click, I get a promis.
const timeLine = document.querySelector('.slider-timing__line');
const buttonNext = document.querySelector('.slider-arrow.next');
let animeTiming
buttonNext.addEventListener('click', nextSlide);
function nextSlide(event) {
event.preventDefault()
console.log(animeTiming); //promise{<pending>}
}
async function timing(duration, delay) {
let isComplete = false;
animeTiming = anime({
targets: timeLine,
width: ['0%', '100%'],
duration,
delay,
easing: 'linear',
complete: () => {
timeLine.removeAttribute('style');
isComplete = true;
}
}).finished;
await Promise.all([animeTiming]);
return isComplete;
};
async function test() {
let a = await timing(10000, 1000);
console.log( a );
}
test()
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question