--- title: "Een geanimeerde walkthrough voor je GoodBarber-app" description: "In GoodBarber stel je de walkthrough één keer in, in maximaal vijf stappen, elk met een afbeelding of, als je wilt, een Lottie-animatie." canonical_url: "https://nl.goodbarber.com/blog/hoe-animeer-ik-de-walkthrough-van-mijn-app-a1503/" lang: nl date: 2026-11-13 last_updated: 2026-11-13 --- # Hoe animeer ik de walkthrough van mijn app? In GoodBarber stelt de walkthrough je app voor bij de eerste start, in maximaal vijf schermen die je maar één keer ziet. Je app heeft maar een paar seconden om zich voor te stellen, en de walkthrough stel je in een paar minuten in via de back-office, in de kleuren en lettertypen van je app. Elke stap toont een afbeelding of, als je wilt, een Lottie-animatie. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Kies **GoodBarber** als jeFavoriete nieuwsbronKies **GoodBarber** als je](https://www.google.com/preferences/source?q=nl.goodbarber.com) 13 nov 2026 · 7 min leestijd ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98688327-68887987.jpg?v=1794562914.069809) Dit is wat een walkthrough voor je app doet, de twee layouts waaruit je kiest en hoe je een stap animeert. ## Wat een walkthrough is en wanneer hij verschijnt ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98688327-68887988.jpg?v=1794562915.885819) De walkthrough is je app die zich voorstelt. In de back-office van GoodBarber vind je hem onder **Mijn App › Walkthrough**. Hij verschijnt op de telefoon, één keer, de eerste keer dat de app na de installatie wordt geopend. Hij komt vóór de toestemmingsverzoeken, meldingen of locatie, zodat het eerste wat je ziet je app is. Hij telt **tot vijf stappen**, elk met een media, een titel en een beschrijving, allemaal optioneel. Eromheen staan van stap tot stap dezelfde elementen, de paginatitel of je logo, de knop **Overslaan**, de pager en de knop **Volgende**, die bij de laatste stap **Aan de slag** wordt. Je gaat verder door op de knop te tikken of over het scherm te vegen. De achtergrond, de lettertypen, de kleur van de knop en van de pager zijn die van je app, dat is ons principe "Set once, consistent everywhere". Je hoeft niets opnieuw te tekenen. De walkthrough is de eerste stap van de onboarding, waarvan we [de best practices](https://nl.goodbarber.com/blog/onboarding-voor-mobiele-apps-sneller-van-eerste-start-naar-waarde-a1439/) uitgebreid hebben beschreven. ## Polaroid of Immersive, twee layouts voor de stappen van de walkthrough ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98688327-68887989.jpg?v=1794562918.1378312) De back-office van GoodBarber biedt twee layouts voor de stappen. Bij **Polaroid** staat de media boven de titel, in de oorspronkelijke verhoudingen, nooit vergroot, en een afbeelding van 1200 × 1200 pixels is genoeg. Bij **Immersive** vult de media het hele scherm, als een achtergrond, en ligt de tekst erbovenop. Reken op 1536 × 2048 pixels en kies een **Effect op de afbeeldingen**, Geen, Dekking of Gradient, zodat de tekst leesbaar blijft op de foto. In beide layouts biedt de **contentuitlijning** zes posities, links of in het midden, bovenaan, in het midden of onderaan. Een eenvoudige regel om te kiezen. Een foto die een sfeer draagt, vraagt om Immersive, dat deed de muziekschool Eastside Music Workshop met haar foto's van de lessen. Een tekening of een animatie die iets uitlegt, vraagt om Polaroid, met een eigen achtergrond, dat is de keuze van Unit 7, het zeefdrukatelier, waarvan de drie stappen getekend zijn. ## Een stap animeren, met een Lottie-animatie in plaats van de afbeelding ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98688327-68887990.jpg?v=1794562920.161842) Een afbeelding zegt wat je app doet. Een animatie laat het zien. Bij de eerste stap van Unit 7 kleurt een tijdslot in de planning groen en wordt het woord BOOKED gestempeld, en je begrijpt dat je via je telefoon reserveert nog voor je de zin leest. Bij de tweede gaat een rakel over het zeefraam en springt de teller van 23 naar 24 afdrukken. Bij de derde is een leeg gemelde Riso-drum weer beschikbaar, met AVAILABLE als sticker. Drie gebaren van drie seconden, in een lus. Dat is ons principe "Polish you can feel", de beweging waaraan je een goed gemaakte app voelt. Deze animaties zijn **Lottie**-bestanden, een licht formaat voor vectoranimaties dat de app rechtstreeks afspeelt. Je vindt ze in de bibliotheek van LottieFiles, of je laat ze tekenen in de kleuren van je app, zoals die van Unit 7. In GoodBarber stel je een animatie net zo makkelijk in als een afbeelding. Kies bij de stap **LottieFiles** in plaats van **Afbeelding**, voeg het bestand toe en stel dan de **Afspeelsnelheid** in, van x0.5 tot x3, en **Afspelen in lus**. Hoe dan ook begint de animatie opnieuw zodra haar stap verschijnt. Bij Polaroid neemt ze de breedte van het scherm en houdt ze haar verhoudingen. Bij Immersive vult ze het scherm als een foto. De animatie blijft een keuze. Een stap doet het prima met een vaste afbeelding, en de twee gaan samen in dezelfde walkthrough. ## Stel de walkthrough in GoodBarber in [Animatie: in het walkthroughpaneel gaat stap 1 van een afbeelding naar een Lottie-animatie, daarna wordt de Contentuitlijning op linksonder gezet](https://player.vimeo.com/video/1246541295?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) De walkthrough is een extensie van GoodBarber. Installeer hem via **Extensiewinkel › Alle extensies**, op de pagina **[Walkthrough voor app](https://nl.goodbarber.com/extensions/walkthrough/)**. Hij kost € 5 per maand in de abonnementen Standard en Premium, en is inbegrepen in het Pro-abonnement. Daarna verschijnt het menu **Mijn App › Walkthrough**, met de preview van je app ernaast. 1. **Kies de layout**, Immersive of Polaroid, bovenaan het paneel. 2. **Voeg je stappen toe**, maximaal vijf. Klik op **Een stap toevoegen** en daarna op **Afbeelding** of **LottieFiles**. Voor een animatie neemt het tabblad **Bestand** je Lottie-JSON-bestand, en het tabblad **URL** de assetlink van een LottieFiles-animatie. Stel daarna de snelheid en de lus in, en schrijf de **Titel** en de **Beschrijving**. De preview ernaast opent op de eerste stap, en met de knop **Volgende** blader je door de andere. 3. **Stel de Algemene instellingen in**, die voor alle stappen gelden. De **Achtergrondkleur**, de **Contentuitlijning**, de **Paginatitel** of een logo op zijn plaats, het lettertype en de kleur van de titel en de beschrijving van de stap, de **Knop Overslaan** en de **Knop Volgende**, de kleur van de **Pager** en bij Immersive het **Effect op de afbeeldingen**. Alles wordt opgeslagen zonder op een knop te klikken, en de preview volgt. In de video wordt de Contentuitlijning op linksonder gezet, en alle stappen volgen. Wil je één stap eigen instellingen geven, een eigen achtergrond, een andere uitlijning, een andere kleur voor de titel of de knop, dan loopt dat via de JSON van je app. De gratis extensie **Advanced edition** opent die met één klik op { BEWERKING }, zoals bij [de schaduw](https://nl.goodbarber.com/blog/hoe-stel-ik-de-schaduw-in-mijn-app-in-a1459/), [de randen](https://nl.goodbarber.com/blog/hoe-stel-ik-de-randen-in-mijn-app-in-a1468/) of [de vorm](https://nl.goodbarber.com/blog/welke-vorm-voor-mijn-app-scherpe-afgeronde-of-ronde-hoeken-a1491/). De editor opent op walkthrough. Klap steps open, daarna de stap die je wilt aanpassen, en voeg de sleutels van het paneel toe die je wilt veranderen. Wil je bijvoorbeeld alleen de tekst van de eerste stap linksonder zetten, klik dan op "+ Voeg toe", typ **contentAlign** in het veld newKey en de waarde bottom_left, en daarna "Voeg toe". Klik tot slot op "Opslaan". De andere stappen houden de Contentuitlijning van het paneel. ## Voor, na: dezelfde stap, als afbeelding en dan als animatie [Animatie: dezelfde stap van de walkthrough, links met een vaste afbeelding en rechts met de Lottie-animatie](https://player.vimeo.com/video/1246541294?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Om te zien wat een animatie verandert, hier twee keer dezelfde stap, die van de drukgang bij Unit 7. Links de stilstaande afbeelding. De tekening is verzorgd, maar staat stil. Ze blijft wat abstract, en je ziet niet meteen wat ze laat zien. Rechts dezelfde illustratie, geanimeerd. De rakel gaat over het zeefraam, de inkt verschijnt waar hij langskomt, de teller springt van 23 naar 24, en je herkent meteen een drukgang die bezig is. Verder is er niets veranderd, niet de tekst, niet de kleuren, niet de knop. Hier maakt de beweging de stap leesbaar. Maar ook als de tekening al duidelijk is, brengt de animatie de walkthrough tot leven en laat ze zien dat je app verzorgd is. ## Mijn favoriete walkthrough is geanimeerd [Animatie: de volledige walkthrough van een app van een zeefdrukatelier, van de start tot het startscherm](https://player.vimeo.com/video/1246541293?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Wat ik het mooist vind, is een geanimeerde walkthrough. Om een app in een paar schermen voor te stellen, ken ik niets sprekenders dan beweging. Die van Unit 7, een gedeeld zeefdrukatelier, is een mooi voorbeeld. Hij gebruikt Polaroid, op een achtergrond in Charcoal #282727, met het logo van het atelier in plaats van de titel. De titels staan in Archivo Black 28, de beschrijvingen in Archivo 17, in een grijs Concrete #A7A7A7. De knop, met scherpe hoeken, en de pager krijgen het groen van het atelier, Unit Green #B9FF00. De drie Lottie-animaties zijn voor de app getekend, in haar kleuren, en elke animatie laat in drie seconden een gebaar van de leden zien, reserveren, drukken, melden. In twintig seconden begrijp je waar de app voor dient, en neemt het startscherm het over. **De walkthrough in het kort** - In een GoodBarber-app verschijnt de **walkthrough** één keer, bij de eerste start op de telefoon, en telt hij tot vijf stappen. - Elke stap draagt een media, een titel en een beschrijving, allemaal optioneel. Eromheen de paginatitel of je logo, de knop **Overslaan**, de pager en de knop **Volgende**, die bij de laatste stap **Aan de slag** wordt. - Twee layouts, **Polaroid**, de media boven de titel, en **Immersive**, de media schermvullend met een effect voor de leesbaarheid van de tekst. - Een **Lottie**-animatie zet je in als een afbeelding, met een snelheid van x0.5 tot x3 en afspelen in lus. Ze begint opnieuw zodra haar stap verschijnt. - Alles stel je in onder **Mijn App › Walkthrough**, en elke stap kan eigen instellingen hebben in de JSON, met de gratis extensie **Advanced edition**. ## Nu jij Installeer Walkthrough voor app via de **Extensiewinkel**, open **Mijn App › Walkthrough** en zet een eerste stap neer met een afbeelding, je titel en een zin. De preview toont hem meteen. Probeer daarna een Lottie-animatie in plaats van de afbeelding, en kijk hoe de pagina tot leven komt. Nog geen app? [Maak de jouwe](https://nl.goodbarber.com/create/) met GoodBarber, de Mobile App Builder. Volg GoodBarber op Google [![Add as a preferred source on Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-en.172e670ec003.png)](https://www.google.com/preferences/source?q=nl.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Over de auteur Marie-Pierre Jeffard UI Designer Ik ben UI Designer bij GoodBarber. Design system van de apps, componenten, layouts, website, illustraties, animaties: alles wat ik doe draait om de interface. Wat ik leuk vind aan ons product: universele regels bedenken die op elk scherm werken en ruimte geven aan elke visuele identiteit. De app wordt een podium voor jouw content. Ik hou van wat er eenvoudig uitziet, en van al het onzichtbare werk dat nodig is om daar te komen: de regels, de keuzes en de beperkingen die een interface overeind houden. Daar schrijf ik hier over. [Meer van Marie-Pierre](https://nl.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)