emojimation is a React component that enables tweening between different emoji expressions. Since it's SVG interpolation on path components, the emojis are of infinite resolution and can be used as a lightweight tool to convey tone and narrative.

getting started

install

npm install --save emojimation

component

At the minimum, you can call the component with <Emojimation/> and it will load with the default 'joy' emotion. Here's a more detailed version.

<Emojimation emotion="joy" duration={800} width="30vh" height="30vh" style={{margin:'20px'}} headColor="yellow"/>

documentation and samples

For a full list of attributes and all 44 emotions, see the Documentation Site

This component was built for the React Riot Hackathon, where our team took home the Innovation Award :D. While it was built as tool for sentiment analysis, SVG tweening can be used for a variety of other things. These drawings were built in a CAD environment, using Grasshopper for Rhino and then converted to a json file for the front-end. Please reach out if you'd like to collaborate on animated transitions for data visualization and interaction.

props

The React Riot Hackathon was a team collaboration with:

Also, props to d3 and the awesome React version, resonance, for making the transitions agree with the React paradigm.

Keywords

FAQs

What is emojimation?

Is emojimation popular?

Is emojimation well maintained?

Last updated on 10 Jul 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install