Transitions / animations

[xem]

Hello, this is a feature request, and I guess it's not an easy one :)

It would be great to be able to edit, translate, rotate or scale an existing shape dynamically, and interpolate this transformation over a custom amount of time.

Ex:

let ell = new Zdog.Ellipse({
  addTo: illo,
  diameter: 80,
  translate: { z: 40 },
  stroke: 20,
  color: '#636',
});

ell.animate({
  diameter: 150,
  translate: {z: -40},
  transition: "500ms",
});

// Result: the ellipse will change diameter from 80 to 150 and move from 40 to -40 in 500ms.

Bonus points if you manage to implement transition-timing-function too (linear, ease-in-and-out, etc)

Thanks, and congrats for this lib!

[desandro]

Thanks for this feature request. Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

[eeropic]

I would use some existing library for now - for example anime.js is library-agnostic in a sense that it can tween any Javascript object values. Here's a simple example https://codepen.io/eeropic/pen/jopgjL

[BinaryMoon]

I'd love to see animation added. Since the models are defined almost entirely numbers then I'd like to be able to animate all the numbers. Changing things like stroke width and colour would be as interesting as changing the rotation and position.

[desandro]

@chrisgannon has a demo up using GreenSock to power the animation: https://codepen.io/chrisgannon/pen/wbYWdj?editors=0010