As a developer, I have always been smitten by the beautiful animation concepts which designers put on their Dribbble accounts for mobile apps and websites.
Until now, I used to spend my days and nights scratching my head in order to build those animations in my projects. That’s because designing animations that delight users is not an easy task. When users are interacting with these animations, we have to make sure that these animations elicit the right emotions, such as the joy of completing a task successfully communicated by an animation. I wanted to build those experiences for our users.
But developing such experiences requires time, effort and for each animation one has to take a different coding approach. One might also need to spend a considerable amount of time developing these animations.
However, recently I found out that there is an approach where one can save a lot of time in creating beautiful experiences. And it also gives the users full control of the animations they are interacting with.
What’s exciting is that you don’t have to be an expert in mobile development, or have a deep knowledge of any of the over-complicated animation frameworks.
I tried it myself and loved it. That’s why I thought I’ll share it with all of you. Let’s get started.
In my toolset, I have chosen the most generic of the platforms to start with.
- React Native. (Even basic knowledge of Javascript would suffice).
- A Lottie animation file exported by using Bodymovin plugin from Adobe After effects.
That’s all you need. The following is a final animation that we are going to build: https://youtu.be/wJVruXWNSX.
#tutorial #web dev #typescript #animation #react native
