Chaining multiple FLIPs on element

[adamduncan]

I'm really enjoying working with FLIP! Thanks for the write-ups and demos.

Wondering what the most effective way of chaining animations to fire on an element sequentially would be. Request for complete callback would get us part of the way there, but wondering if there's something else at an API level that could be explored? Would love to hear your thoughts.

Cheers

[Pesthuf]

I think the flipped element fires a "flipComplete" custom Event at the end that you can handle via addEventListener.

[adamduncan]

Thanks. The flipComplete will tell you which/when element has finished FLIPing, but not which animation has just finished. For example, if I had a single element which could be FLIP'd in a few ways sequentially (.flip-left, .flip-down and .flip-fade), the only way of telling which has just happened is to check the FLIP or element target's classList.

const animateShape = document.querySelector('.flip-el');

const flip = new FLIP({
  element: animateShape,
  duration: 500
});
flip.snapshot('flip-left');
flip.play();

animateShape.addEventListener('flipComplete', flipEvent => {
  // flipEvent.target.classList
});

From there, I guess you could infer and FLIP the next intended animation? Starts to get hairy once there's more than a couple of FLIPs involved. I may be missing an obvious solution here...