After the encouraging responses I received on last month's post, I decided to write another post documenting my process on this month's Creative Coding Club challenge: "Back to School".

After my experience with last month's pen, I tried to keep things less complex while at the same time still challenging myself.

The Idea

I started with a few sketches:

Sketch 1 Sketch 2


The idea was to achieve the following:

  • A bumpy planet with a cyclist riding around on it
  • A cloud that the user can rotate around the planet
  • A way to make the cloud rain on the cyclist
  • Have the cyclist pull out an umbrella when he is passing under the rain cloud


The general idea was to include some reactive animation. I already had some technologies in mind while working on the sketches. I decided on After Effects, Bodymovin, Anime.js, and Duik.

  • Anime.js for getting objects to follow and rotate along a SVG path.
  • After Effects for animating the bike, cyclist, and umbrella.
  • Bodymovin for exporting my After Effects animations for use in the browser.
  • Duik for rigging my cyclist, and giving him some realism while minimizing the animation work.

The Design

After settling on the idea, I created a mood board to gather ideas that I thought would suit the scene:

I started by designing the planet and all of the elements around it. I wanted to keep the overall scene fairly small in size and the details on the objects to a minimum. This would leave me more time to focus on the interaction and animation.

Individual elements Final scene

The Animation

This was the part I was looking forward to the most, and expectedly had the most fun with. I had never worked with After Effects, so I started searching for some good intro videos to follow. Unfortunately, most of the ones I found focused on video editing, which wasn't what I was after. So I decided to look for character rigging videos instead.

I watched a video tutorial by Gigantic to get a sense of how rigging works with Duik in After Effects. I then read some posts on the basic UI of After Effects, and this was the result:

Static character Rigged character


Creating the above rigged animation inspired me to spend the rest of the week working with After Effects.

With my newly acquired knowledge of After Effects, I started rigging my cyclist. I began with the pedal animation. Once it looked natural, I added some body movements for realism.

Pedal animation Added body movement


The closed umbrella was achieved by moving all the bottom points of the umbrella close together. The points then gradually spread apart as the umbrella is pulled from behind the cyclist's back. At the beginning of the animation, the umbrella fades in very quickly to make it seem as though it's coming out of the cyclist's backpack.

Bottom points of the umbrella Umbrella animation


There were two main animations:

  1. The cyclist's arm with the umbrella.
  2. The cyclist pedalling on the bike.

These two animations were exported separately. The reason for this was so the two animations could play independently without interrupting one another. The umbrella animation sat behind the cyclist to give the illusion that it was attached to the cyclist's body.

Here are the animations close up:

The Code

I began with the cloud movement by rotating a box (to be the cloud) around a circle. Then I used Anime.js to get another box (to be the riding cyclist) travelling along the SVG path (to be the ground of the planet).

Cloud movement Object along a path


Once those two elements were completed, I embarked on my first Bodymovin animation. I started with the bike first to test the waters. Once everything was working as intended, I exported the cyclist and the bike animation.

Animation along path 1 Animation along path 2


Distance Detection

The next step was to determine when the bike was close enough to the cloud to trigger the umbrella animation. I placed a dot in the middle of the cyclist and a dot in the middle of the cloud, and constantly calculated the distance between the two. If the distance was smaller than a certain amount, the umbrella animation would then trigger.

Distance detection Triggering the animation


The Rain

I initially used canvas to render the rain. However, due to the amount of particles required to make the rain look realistic, this negatively impacted the overall performance. So I decided that a static vertical looping image would be more ideal.

Canvas rain Static rain


Once the rain animation was complete, I added some finishing touches:

  • A bike light that turns on when the cyclist passes under the cloud
  • Allow the user to start or stop the rainfall from the cloud by pressing the space key

Summary and Final Thoughts

I had a blast working in After Effects, and it's really exciting for me to think about all its possible uses in my future projects.

Go join the Creative Coding Club if you haven't already, and thanks for reading!

-Mariusz