Anime: Enhancement: Timeline

Created on 1 Jul 2016 · 4Comments · Source: juliangarnier/anime

Hey Julian, good work you did right there. I was curious if your vision of anime includes some kind of a chaining functionality, eg.:

anime.chain({autoplay: true}, [anime({
  targets: '.first',
  translateX: '13.5rem'
}), anime({
  targets: '.second',
  translateX: '13.5rem'
}), anime({
  targets: '.third',
  translateX: '13.5rem'
})]);

or maybe

const chain = anime.chain({autoplay: false});
chain.add(anime({
  targets: '.first',
  translateX: '13.5rem'
}));
chain.add(anime({
  targets: '.second',
  translateX: '13.5rem'
}));
chain.add(anime({
  targets: '.third',
  translateX: '13.5rem'
}));
chain.play();

The tricky part is probably nailing the delays and such. Greensock does that par excellence, but it's obviously bulky and I think that's definitely something you want to avoid.

Source

tom2strobl

👍3

Most helpful comment

If at all, I prefer simple Promise support (just sugar for the complete callback): that should be like a couple lines of code.
Then, chaining can easily be implemented with .then and Promise.all.

I'm here because I find gsap way too bloated so I hope anime remains a small, no cruft animation lib.

AlexGalays on 3 Jul 2016

👍3

All 4 comments

If at all, I prefer simple Promise support (just sugar for the complete callback): that should be like a couple lines of code.
Then, chaining can easily be implemented with .then and Promise.all.

I'm here because I find gsap way too bloated so I hope anime remains a small, no cruft animation lib.

AlexGalays on 3 Jul 2016

👍3

@AlexGalays agreed, and Promise is something that I'm currently looking at.

juliangarnier on 3 Jul 2016

👍1

@tom2strobl chains are implemented in anime-next

 let anims = [anime({
   targets: '.first',
   translateX: '13.5rem',
   autoplay:false,
 }), anime({
   targets: '.second',
   translateX: '13.5rem',
   autoplay:false,
 }), anime({
   targets: '.third',
   translateX: '13.5rem',
   autoplay:false,
 })];

   // anime.chain allows you to
  anime.chain(anims).play();
  // or in es6
  anime.chain(...anims).play();

  let chain = anime.chain(animation1,animation2,animation3);
  // you can add to chains
  chain.add(animation4);
  // and remove from them
  chain.remove(animation1);

  // use chain.Do to apply an action to
  // the animations in the chain
  // chain.Do( event | true , string | function )
  chain.Do('complete','restart');
  // adding true makes actions imediate
  chain.Do(true, anim => {
    // do something to all
    // animations in the chain
  });
  chain.Do(true,'pause');

  // available chain actions are
  chain.play
  chain.pause
  chain.stop
  chain.restart
  // use chain.Do for anything else