Sample work · Video & Animation
Lottie animations: success checkmark, loading indicator and onboarding
Three Lottie animations as for an app onboarding, as small JSON files. The colors come from a brand palette, the success checkmark is included in two color variants.
Sample work (demo), not a client job. Built as a trial task with invented example data; the check figures below come from the automatic test run and are not polished.
What was built
- Success checkmark with trim paths, loading indicator as a seamless loop, onboarding scene with multiple layers
- Colors from a brand palette, each variant from the same template
- Tested in browser with lottie-web, no errors in console
Download erfolg.json Download erfolg_variante.json Download lade.json Download onboarding.json
Shape layers from code; no After Effects file, tested against lottie-web, not on iOS or Android devices.
How it was checked
Automatic test run on 2026-11-01, taken from the log (test data invented, figures measured):
- 4 Lottie files erfolg_marke_a 2.4 KB, erfolg_marke_b 2.4 KB, lade 3.1 KB, onboarding 7.4 KB (each < 50 KB)
- lottie-web 5.12.2 svg: 0 console errors
- Success: Checkmark 0 -> 5182 px in checkmark color, ring 16229 px
- Loading: Loop frame 0 vs end diff 0.028
Limits
What this sample does not cover, so nobody expects more:
- Shape layer animation from code; no After Effects project file (.aep) and no import of a customer AE file
- Checked against lottie-web (web, svg renderer) in Chromium, not on iOS/Android with lottie-ios/-android
- No expressions, no embedded raster images; no masks, mattes, effects
- Customer SVG graphics can only be adopted as simple paths (polylines), no gradients/filters
- Loop seamless only if the animation is built symmetrically; length typically 1-3 s, 512x512
Something like this for your business?
Describe briefly what you need. You get a fixed price before I start; nothing happens without your yes.