Anime: Chained Animation

Created on 14 Oct 2016 · 10Comments · Source: juliangarnier/anime

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

Source

jeanpaze

Most helpful comment

Really excited about this library.

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

```javascript
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;
}

misaunde on 8 Mar 2018

👍22 ❤7 🎉6

All 10 comments

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'
        });
    }
});

alexchantastic on 15 Oct 2016

👍2

Hi @alexchantastic cool! You give me an idea:

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

It seems to me more easy to understand, especially if there's more chains.

Anyone have a better idea of how to do this?

Thanks,

Jean

jeanpaze on 15 Oct 2016

@jeanpaze I think you're probably looking for behavior being discussed in #4. If you are worried about lots of nested syntax, you can define the callback function outside of the anime object like so:

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

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

alexchantastic on 15 Oct 2016

@alexchantastic Not exactly a callback, but something like the timeline behavior from GSAP. Maybe this:

anime({
    targets: '#test-1',
    translateX: 100,
    scale: [.5, 1],
    rotate: 180,
    delay: 1000,
    opacity: [0, 1],
    duration: 2000,
    easing: 'easeOutExpo',
}).anime({
    translateX: 200,
    scale: [1, 2],
    rotate: 360,
    delay: 3000,
    opacity: 0,
    duration: 1000,
    easing: 'easeInExpo',
}).anime({
    translateX: 400,
    scale: [2, 1],
    rotate: 0,
    delay: 7000,
    opacity: 1,
    duration: 1500,
    easing: 'easeOutExpo',
});//and so on...

Note that for the chained calls I haven't declared the targets param.

Thanks

jeanpaze on 18 Oct 2016

I see. #15 might be related to your request as well (not chaining, but being able to define multiple keyframes).

alexchantastic on 18 Oct 2016

Almost there! I think my previous example it's more flexible (and maybe more easier to solve than #15?). Anyway, when @juliangarnier (or someone else) find a solution to avoid overlap, in part this issue will be solved too.

jeanpaze on 18 Oct 2016

Anime.js was designed to do simple animation (A > B) quickly, not complex timeline animations with multiple keyframes.
I hope to find the time to implement a real keyframes system in V2.

juliangarnier on 26 Oct 2016

Just to let you know, V2 is almost here, and will add support for multiple keyframes by properties.
Examples here : http://anime-js.com/v2/documentation/#keyframesChain

The documentation is still WIP, and I didn't have the time to write a proper change log yet, but the code is available for testing here : https://github.com/juliangarnier/anime/blob/v2.0/anime.js

Feedback is welcome :)

juliangarnier on 3 Jan 2017

Well done, looks awesome! I'll test soon.

jeanpaze on 3 Jan 2017

👍1