Stagger on Interpolation

[nunospot]

Hello,

I'm using just animate combined with polymorph to animate a svg object. The animation looks good, but it seems that the stagger property is not being set, the animation runs without stoping between the path sequences.

  var shape = just.animate({
    targets: '#shape14_target',
    duration: 40000,
    stagger: 2500,
    props: {
      d: {
        interpolate: svgMorph,
        easing: 'easeInOut',
        value: [
              '#shape14_state1 path',
              '#shape14_state2 path',
              '#shape14_state3 path',
              '#shape14_state4 path',
              '#shape14_state3 path',
              '#shape14_state2 path',
              '#shape14_state1 path'
            ]
      }
    }
  })

  shape.play('Infinity');

[notoriousb1t]

Staggering is intended for adding increasing delays between targets. Are you looking for something like this?

https://codepen.io/notoriousb1t/pen/zjREvR/

I threw together some icons that pause between each morph.

[nunospot]

Yes! That's exactly what I want. Thank you

[notoriousb1t]

No problem at all 😄