D
D
Dmitry Markov2020-06-05 13:06:56
JavaScript
Dmitry Markov, 2020-06-05 13:06:56

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()

Tell me something.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question