Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chained Animation

See original GitHub issue

This can be an awesome feature for banner ad animation. I tried to do this:

anime({
    targets: '#test-1',
    translateX: 100,
    scale: [.5, 1],
    rotate: 180,
    delay: 1000,
    opacity: [0, 1],
    duration: 2000,
    easing: 'easeOutExpo',
});

anime({
    targets: '#test-1',
    translateX: 200,
    scale: [1, 2],
    rotate: 360,
    delay: 5000,
    opacity: 0,
    duration: 1000,
    easing: 'easeOutExpo',
});

But the first call was ignored. It’s possible to do an equivalent behavior? Basicly these steps:

Anime in
Wait X seconds
Anime out (with different parameters)

Thanks,

Jean

Issue Analytics

State:
Created 7 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

36reactions

misaundecommented, Mar 8, 2018

Really excited about this library.

If you call .finished, it will return a promise. Then you can use async/await:

async yourFunction() {   
   await anime({
      targets: '#test-1',
      translateX: 100,
      scale: [.5, 1],
      rotate: 180,
      delay: 1000,
      opacity: [0, 1],
      duration: 2000,
      easing: 'easeOutExpo',
  }).finished;
  
  await anime({
      targets: '#test-1',
      translateX: 200,
      scale: [1, 2],
      rotate: 360,
      delay: 5000,
      opacity: 0,
      duration: 1000,
      easing: 'easeOutExpo',
  }).finished;
}

2reactions

alexchantasticcommented, Oct 15, 2016

You can use the complete callback to chain animations like so:

anime({
    targets: '#test-1',
    translateX: 100,
    scale: [.5, 1],
    rotate: 180,
    delay: 1000,
    opacity: [0, 1],
    duration: 2000,
    easing: 'easeOutExpo',
    complete: function() {
        anime({
            targets: '#test-1',
            translateX: 200,
            scale: [1, 2],
            rotate: 360,
            delay: 5000,
            opacity: 0,
            duration: 1000,
            easing: 'easeOutExpo'
        });
    }
});