We all love building beautiful products with all the fancy stuff. Especially creating React apps. But when it comes to animations, it can sometimes be tough.

Patrik, a friend of mine who is a designer, created a library called useAnimations. Over 70 awesome micro animations ready to use!

Let's simplify it

I wanted to use it right away for my personal website which I have in GatsbyJS. However, the javascript implementation is not that simple. The way I was imagining to use the animation icon is something like this.

<Animation key="twitter_animation" animation="onClick" />

But since there was no library that serves as a wrapper component for Lottie, the usage is a bit tricky. This is an example of the plain implementation for the calendar animation on hover.

//Play an animation back on second click

let iconMenu = document.querySelector('.bodymovinanim');

    let animationMenu = bodymovin.loadAnimation({
            container: iconMenu,
            renderer: 'svg',
            loop: false,
            autoplay: false,
            path: "https://raw.githubusercontent.com/thesvbd/Lottie-examples/master/assets/animations/menu.json"
    });

    var directionMenu = 1;
      iconMenu.addEventListener('click', (e) => {
      animationMenu.setDirection(directionMenu);
      animationMenu.play();
      directionMenu = -directionMenu;
    });

The motivation was clear. How to make the implementation of micro-interactions easier. Not only for myself but for other developers too. After some research I found some Lottie react libraries, but still wasn't exactly what we wanted. From my simple react wrapper I generalize it so I could open-source my component.

That is how react-useAnimations was born. A simple react library

Reddit promotion

I wanted to share this library with other people and the first thing that came to my mind was to post it on Reddit ReactJS thread.

To my surprise, I got over 260 upvotes and over 60 comments. Seems like people liked our library and we got a lot of stars on GitHub along the way as well. 🔥

Publishing the package

In the beginning, I was afraid that no-one would use my library, but so far here are the statistics.

🌟 We have 544 stars on Github

❤️ The total numbers of download had surpassed 30,000 times

⚒️ We deployed 53 versions

📅 The library was published on 30 august 2019

Share your ideas

As for me, when it comes to open-source. I would highly encourage every developer to contribute. I've learned so many things along the way. From publishing an npm library to writing bash scripts and.

Not only that you have added value back to the tech community but contributing to open source projects helps your reputation and can leverage your career.

Maybe you already have an idea of what to build in your head. This is the time to start building. I hope that my story inspires you to share your ideas with others.