search

miukimiu / react-kawaii

Cute SVG React Components
https://react-kawaii.vercel.app/
MIT License
2.91k stars 104 forks source link

Feature request - extend animation #59

Open bovas85 opened 5 years ago

bovas85 commented 5 years ago

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

miukimiu commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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