Lottie-bestanden, After Effects in, geoptimaliseerde JSON uit, themable at runtime op elk oppervlak.
Lottie is het format dat brand-kwaliteit motion laat opleveren naar het web, de cross-platform mobile-app en de native iOS/Android-apps vanuit één bron. We bouwen animaties in After Effects met Lottie vanaf het begin in gedachten, themable, performance-getuned, en klein genoeg om in het payload-budget van de pagina te passen.
Wat we bouwen
After Effects + Bodymovin-pipeline
Composities gestructureerd voor nette Bodymovin-export: native AE-expressies die vertalen, layer-naamgeving voor runtime-toegang, geen unsupported effects die binnensluipen. De export-pipeline is deel van het design-proces.
Themable at runtime
Color, stroke-width en key-parameters geëxposeerd via Lottie's expression-bindings. Dezelfde JSON rendert op dark en light oppervlakken, in primary of muted accent, zonder opnieuw te exporteren uit AE.
Geoptimaliseerde bestandsgrootte
Vector-vormen verkozen boven raster; ongebruikte layers gestripped; gradiënten geminimaliseerd. De meeste bestanden opleveren onder 100kb; de paar die meer nodig hebben rechtvaardigen de bytes tegen hun on-page belangrijkheid.
Cross-runtime testen
Animaties getest in lottie-web, lottie-react-native en de native iOS/Android Lottie-runtimes. Subtiele verschillen (filter blur-support, alpha mask-quirks) gevangen voor het softwareteam ze vindt.
Reduced-motion varianten
Elke Lottie levert op met een statisch fallback-frame en een 'reduced motion'-variant die gebruikers-voorkeuren respecteert zonder de visual helemaal weg te laten vallen.
Asset-pack met gebruiks-noten
Geleverd als een folder met de AE-bron, de geoptimaliseerde JSON, een runtime-preview HTML, en per-animatie noten (aanbevolen grootte, frame rate, looping-gedrag). Het softwareteam integreert zonder giswerk.
Waar dit past
Je levert op Lottie-animaties over web + mobile en wilt één source of truth in plaats van drie exports.
Je bestaande Lottie-files zijn in haast geëxporteerd en de bestandsgroottes tanken pagina-performance.
Je hebt themable animaties nodig die at runtime hercoloureren op basis van gebruikers-voorkeuren of dark mode.
Tech stack
- After Effects
- Bodymovin
- lottie-web
- lottie-react-native
Wil je dit voor je team?
30 minuten om vast te stellen wat je nodig hebt. Geen pitchdeck, geen verplichtingen. We zeggen je eerlijk of Stacklane past.