Canada at Expo 2020 Dubai - Motions

The project

The agency won the bid to design and develop the digital experience of the Canadian pavilion at Expo 2020 Dubai. Most of the team at Akufen worked on it for months to make the magic happens! I worked on three different aspects of the project: multiple 3D experiences called Traces, a 3D trailer for their social medias and motion videos for digital scrollable frescoes showing Canada's life and people across seasons. I made a case study about each project.

The digital frescoes were thought as a journey through Canada from different perspectives, social, economy, the richness of its landscapes, …

My contribution to the project

• I animated the motion design video in After Effects based on a storyboard designed by an artistic director from Akufen

• We worked closely with the developers to tackle the technical limitations I detail below, and I did a lot of research and optimization work for the video export

• We worked with a composer to create a custom soundtrack for the videos

Challenges

The biggest challenges on this project were not creative, they were technical.

Keyframe interval and bitrate

I discovered the specifications of H264 on this project. This codec uses a technic called "keyframe interval" to save space. It means that a complete image is generated every x frame, and then each frame between a keyframe is a calculation of the differences between the last frame and the current one. It's great compression wise, but causes one issue: we wanted to trigger the video on scroll and stop it or slow it down a lot when the user stops scrolling. But to achieve that, the player will slow down using keyframes. If you don't have enough keyframes, the slowdown will stutter.

You just have to increase the keyframe interval then, right? Theoretically, yes, but increasing it will also increase the weight of the video, by a lot!

We had to change the behavior of the experience to fix these technical issues:

• The video never stops, it's playing by default and can be smoothly paused by clicking on it

• We put in place a dynamic stream with multiple resolutions and bitrates, adapting to the network of the user.

Judding

Judder is a well-known issue in cinema. Basically, if something crosses the video too quickly, it will feel like it's moving by doing tiny jumps, it won't be smooth. A basic rule I learn while looking for solutions is pretty simple: at 30fps, an item should make it from one side to the other in seven seconds.

An easy trick would have been to add motion blur, but we wanted to keep a sleek animation.

I reworked the videos with that in mind, slowing down and smoothing my layer animations to mitigate the effect.

What I learned

As listed above, this project was a lot of technical learnings. I didn't expect any of that when I started working on the project, but it strengthened my understanding of videos and codecs.