Creating a Haven Life Lego Animation
For Haven Life’s fourth anniversary, the branding team designed a company values book and distributed a copy to every employee. These values reflect our company culture and describe the way we work together and support one another in the workplace.
In the book, the value “We matter to each other” is accompanied by an illustration of the Haven Life logo made out of legos.
I wanted to push this idea further and animate the legos coming together to form the Haven Life logo as a metaphor for people coming together to form a team. Since we were celebrating Haven Life’s fourth anniversary, I also wanted the legos to form the number “4” and transition back into the logo to make a seamlessly looping animation.
Stage 1: Transforming the Haven Life logo into a “4”
The base illustration contains sixteen copies of the same image of a 2x2 lego brick. Every piece has a specific layer order to achieve the 3-dimensional look; it’s what makes some legos look like they’re stacked on top of others.
Although the mechanics of the animation are simple — the legos move around in a two dimensional space — the challenge was in the timing. I wanted the animation to come together in a matter of seconds, but also maintain visual appeal.
I numbered the legos to keep track of them throughout the animation. I also numbered their original positions so I could easily put the logo back together during stage 2. Finally, I listed the layer order. This part was critical: the “4” is also supposed to look 3-dimensional, so I had to carefully choose which legos assembled the 4 so that they overlapped correctly.
It’s like solving a puzzle with no guide, no parameters, and all of the pieces look exactly the same.
To brainstorm the overall look and feel of the animation, I cut and numbered sixteen paper squares and moved them around a surface, taking pictures along the way. I decided that each lego would move ten pixels between each frame (regardless of the direction) and chose a vortex-style movement for the transitions.
When I felt confident I had the concept pinned down, I started building the animation. I used Adobe XD and Photoshop for this project. Ordinarily a prototyping software, XD has an auto-animate feature which allowed me to preview my animation frequently while building it. From there, I was able to export the artboards and assemble the GIF in Photoshop.
Stage 2: Transforming the “4” back into the Haven Life logo
Theoretically, I could play the first half of the animation in reverse. But one of our other company values from the values book asks us to “obsessively learn and find better ways.” So, in true Haven Life form, I opted for the challenging yet more rewarding path.
I finished the animation about ten different ways — putting all the legos back into their original positions frame by frame. Unfortunately, none of these attempts resulted in an elegant and timely animation. I realized that if I wanted more aesthetic flexibility, I was going to have to put the legos back into new positions. This meant doing the one thing I tried really hard not to do during stage 1: change the layer order, and make the change undetectable to anyone watching the animation.
I wish I could describe what happened next in more detail, but I’m honestly not sure how I worked it all out. All I know is that it took a lot of math to calculate the X and Y positioning of every lego for every frame.
Only one lego kept its original position and placement in the layer order; the rest adjusted to new positions.
Below are all 41 frames in the animation. In stage 2, there is only one frame in which no lego pieces are overlapping. I took advantage of this to quickly change to the new layer order. Once the logo is fully formed, the animation loops back to the beginning, and back to the original positioning and layer order.
So, there you have it: a seamlessly looping lego animation for Haven Life’s fourth anniversary.
LEGO® is a trademark of the LEGO Group of companies which does not sponsor, authorize or endorse this site
