MyRadar App Onboarding Animation

Philip Whiteman / MyRadar / 2024

Onboarding that shows the gesture.

My role: UI animation and Lottie export

Delivered: Onboarding screens as Lottie JSON (1080×1920, 60 fps) with HTML previews

Tools: After Effects, Bodymovin/Lottie

The brief

Philip Whiteman needed a Lottie animation across four onboarding screens for a client's app. The logo had to slide up as if casting a shadow on the ground, then move to the top with the shadow following; the welcome text slides up next; then app screenshots show that pulling the bar down reveals more information, followed by a second feature. We started with one Zoom call on the brief.

The build

The MyRadar wordmark is built letter by letter so it can assemble on screen, with a separate shadow layer under the icon. The app screens sit in a phone frame and move with a swiper, and a touch indicator acts out each gesture while a caption explains it: pulling down for the detailed forecast, and tapping the layers panel to turn visuals on and off. A pulsing Next button closes each screen.

The constraint

The app UI came as screenshots and screen recordings, so the screens are embedded as images inside the Lottie files (four per file). That puts each file at about 480–490 KB.

The delivered experience

I delivered the intro screen (15 s) and the feature screens (18 s) as Lottie JSON, each with an HTML preview, packaged for handoff on 25 March 2024.

Client feedback

> Ilya is the epitome of professional. His work was magnificent, and involved no back and forth. We had one zoom call discussing the brief, and the rest is history. What I asked him to do was not the easiest task in the world either. He's worth every penny, and plan to utilize his skillset in the future.

— Philip Whiteman