In summer 2018, I worked as a creative technologist and took on a sprint challenge to prototyped Nike’s online campaign for Shanghai 2018 Marathon. The goal was to come up with a solution that can display motion graphics lightweight on mobile devices responsively. 
Working as a creative technologist intern, I was given one week to prototyped the animation from scratch. The solution was adopted for the final WeChat mobile campaign.
Duration: 1 week
Role: Creative Technologist
Team: Miki Bin, creative technologist intern; Wenqian Hu, design intern  
Company: AKQA, Nike
Tools Explored: P5.js, animate.js, lottie.js, afterEffects
Legal: to comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information here is my own and does not necessarily reflect the views of AKQA.
Our Challenge
Traditionally GIFs were used to display flashy animation on websites. However, to make the best mobile viewing experience, I need to come up with a solution that compressed the file size while keeping the image resolution high.
Technical Research
I started different researches on potential solutions with JavaScript. I first explored to prototype with P5.js and anime.js. I made prototypes with these two tools, but the first solution is not good for responsive design, while the latter is limited in its sequencing.
I finally found out Lottie.js, a javascript library developed by Airbnb that transformed afterEffect sequence into javascript animation sequence by converting layers into javascript objects.
High Fidelity Prototype
I use the afterEffects sequence I made previously to successfully assembled a javascript-based web animation sequence with Lottie.js, and surprisingly compressed half of the animation file size.
Final Work
Based on the prompt given by the design, I created the afterEffects sequence based on the afterEffect sequence made by another intern.
I made the animation responsible for different mobile devices.

You may also like

Back to Top