I am building one-minute animation named ‘Perfect Life’ 👌.
Inspiration for building a short animated movie came at the end of Covid Quarantine. I was about to have a milestone birthday and it dawns on me that things may go downhill health and wealth point of view. That made me wonder – where has the time gone?
So, I came up with this simple story Line – For a first-time animator, simple is better.
Putting this storyline into Miyazaki-style animation is presenting a huge challenge! My failed attempts will make a better story than actual animation, so here you go.
Attempt 1:
My first thought was to study Adobe Animator. I subscribe to the overpriced Adobe Cloud and downloaded Adobe Animator. I started to make my way through the ‘Getting Started’ Tutorial to move a pencil. Adobe Animator’s first tutorial had about 14 steps – each explaining find a small square in this panel and click here. And that was just ‘hello world’.
Needless to say, I am not Miyazaki – I couldn’t get the pencil to move! This was a fail! 😖
This is too frustrating. I decided to take a break – not because I needed it – I didn’t know how to move forward.
During my break period – I thought that I may not be a great animator or a movie maker – but I know how to get pixels painted on the web browser. I am a front-end web developer so Why not use that skill set to put together a video? That is where I started working on Attempt 2.
Attempt 2:
The world of animation is loosely divided into two categories – 2D and 3D. 2D animation is old-school animation where you are drawing frames and making frames move.
Since I knew few things about SVG and ReactJS, I decided to give that a go.
When you search on Google, there are multiple animation libraries for ReactJS. The most talked-about is react-spring. I spend two weekends learning about react-spring. It turns out react-spring isn’t the right solution for building character animation.
ReactJS with react-spring is good for smaller animation – but for a large-scale animation, this is not the right tooling.
Attempt 3:
As I was researching yet another tool – I gave ThreeJS another pass. Initially, ThreeJS seems daunting and intimidating library – Something I can’t possibly learn. But, after trying out various other options, I decided to give it a go.
There!