Artikel

Here's ... Lottie!

4 april 2019 | Door Tessa Kooiman

Bam enters the jungle

Bouwbedrijf BAM kwam bij Jungle Minds met de vraag om meer klantgericht te gaan werken: “Help ons de huizenkoper tijdens de gehele woonreis (van oriëntatie, naar kopen, tot wonen) voorop te stellen”. BAM heeft hiervoor Homestudios bedacht, waar we samen jaren hard aan hebben gewerkt. Het resultaat: een omnichannel klantervaring, waarin de online klantbeleving, het fysieke experience center en de persoonlijke aandacht naadloos samenkomen. Meer weten over wat wij hebben gedaan voor Homestudios, bekijk dan hier de case.

Een onderdeel van het project was het bouwen van de Homestudios applicatie. In het experience center kunnen toekomstige bewoners zich laten inspireren en de mogelijkheden van hun nog te bouwen huis daadwerkelijk voor zich zien. Met behulp van de app kunnen zij hun woonvoorkeuren ontdekken, opslaan en aanpassen, om zo tot het perfecte thuis te komen.

En om deze app compleet te maken, hadden we animaties nodig. Maar hoe dan?

Het struikelblok

Tijdens het ontwikkelen van de app liep het team van Jungle Minds tegen dit probleem: animaties toevoegen aan de app. Het gebruik van animaties versterkt de beleving en zorgt voor een gebruiksvriendelijke app. Echter, wellicht een bekend gegeven, dit is nogal een lastige klus. De programmeur moet een enorme lap code schrijven om deze animatie mogelijk te maken, wat als gevolg heeft dat de designer niet veel controle meer heeft over hoe het er uiteindelijk uit komt te zien.

Welkom Lottie!

Onze oplossing: Lottie, een (iOS, Android en React Native) library. Lottie maakt het mogelijk om via Bodymovin in Adobe After Effects animaties te exporteren als JSON file. Deze JSON wordt door Lottie omgezet naar een vector animatie.

Timing vs Tijd

Complexe animaties zijn nu relatief makkelijk te maken en -belangrijker- een (motion graphic) designer kan het zélf ontwikkelen.

Als designer bepaal je de vormgeving, dynamiek en timing. De designer heeft echter geen controle over de volledige tijdsduur van de animatie. Deze tijdsduur wordt nog steeds bepaald door de developer. Die moet aangeven wanneer de animatie start en hoe lang deze duurt. Dus: de designer bepaalt de timing en de developer bepaalt de tijdsduur.

Happy designer – Happy developer

Het gebruik van Lotties scheelt de developer een boel vage aanwijzingen en heel veel tijd en code. Voor de designer is het geweldig om zelf zijn of haar visie neer te kunnen zetten, zonder tussenkomst van de developer.
Overleg tussen designer en developer is nog steeds nodig om tot het perfecte resultaat te komen, maar deze gesprekken verzanden nu gelukkig niet meer in “die sfoosh moet sprankelender” of “laat de plop iets zakken”. En zodoende is er nog genoeg tijd over voor een gezamenlijk potje tafelvoetbal.