Here's ... Lottie!

5 April 2019 | By Tessa Kooiman

BAM enters the jungle

Construction company BAM came to Jungle Minds with this challenge: "Help us to become more customer-oriented, to put the home buyer first during the entire journey, from orientation to buying to living".

To do this, BAM created a new proposition: Homestudios. Together we have worked hard to get to this unique result: an omnichannel customer experience, in which the online customer experience, the physical experience center and the personal attention come together seamlessly. To know more about what we did for Homestudios, read the case here.

Part of this project was building the Homestudios application. In the experience center future residents can be inspired and see all the possibilities of their house that is yet to be built. With the help of the app, they can discover, save and adjust their preferences to arrive to the perfect home.

And of course, for this app we needed animations. But how?

The hurdle to overcome

While developing the app, the Jungle Minds team ran into this problem, how to add animations to the app. The use of animations is essential: it enhances the experience and provides a user-friendly app. However (perhaps a known fact) this is not easily done. The developer has to write an enormous amount of code to make the animation possible, and this means the designer no longer has much control over what it will ultimately look like.

Here’s … Lottie!

Our solution: Lottie, an (iOS, Android and React Native) library. Lottie makes it possible to export animations as a JSON file via Bodymovin in Adobe After Effects. This JSON is converted by Lottie to a vector animation.

Timing vs Time

Thanks to Lottie, complex animations are now relatively easy to make and -most importantly- a (motion graphic) designer can develop the animation him- or herself.

As a designer you determine the design, dynamics and timing. However, the designer has no control over the duration of the animation. This duration is still determined by the developer, who indicates when the animation starts and how long it lasts. This means: the designer determines the timing, the developer determines the duration.

Happy designer – Happy developer

The use of Lotties saves the developer loads of vague instructions and a lot of time and code. For the designer, it is great to be able to create his or her vision without the interference of a developer.

Dialogue between designer and developer is still needed to achieve the perfect result, but fortunately these conversations are no longer peppered with words like "sfoosh" or "plop". And this leaves more time for another game of foosball.