Feature request - extend animation

[bovas85]

Extend elements so they take props like eyes, mouth and nose in order to extend animations to control each element more accurately.

I suppose using a className to target each element works, but it's not declarative nor dynamic.

What do you think?

Apologies if this is already implemented but I couldn't find any documentation on how to animate and the cds link is broken

[elizabetdev]

Hi,

Right now, the only way of creating an animation is to target elements and animate with CSS or an animation library:

https://codesandbox.io/s/72qjwqwlo0

What you are suggesting is to have some animations by default. Is that right?

For, instance something like:

<Planet mood="sad" eyes="blink" />

I think it's a good idea!

[phmatray]

I think the animation should be different depending on the mood of the avatar. An angry avatar will not be animated in the same way as a happy avatar.

Perhaps we could move on to a Boolean property?

<Planet mood="sad" animated />

[bovas85]

That's going to just apply transition on and off. My point for this is to allow controlling specific elements of the svg by exposing them via prosp. You can pass a specific function or class perhaps