I created these animations as part of my UI work during my time as a UI/UX Designer at Codewalla (2022–2024). Using Adobe After Effects, along with plugins like Bodymovin and LottieFiles, I generated JSON files for seamless developer handoff. I also used Adobe Media Encoder to render them in the required specifications.
I really enjoyed making these! This collection is just a small sample of my work, as I can’t showcase NDA-protected projects. Some of the designs here even include rejected concepts. Hope you like them!
Tools used:
Running man animation
I created this animation as a success screen for a game-tech and ed-tech mobile app. It started with a hand-drawn sketch, which I digitized in Adobe Illustrator. I then animated it in After Effects, using the Bodymovin plugin for rigging and exporting the final animation as a JSON file via LottieFiles.
Ultimately, the design was rejected because the brand decided against using mascots in the app, as it didn’t align with the style guide. We opted for a different approach that didn’t involve characters. Still, this was a fun exploration, and I enjoyed bringing it to life!
Week Streak Animation
I created these designs to celebrate users completing a week-long streak. I explored multiple ideas, and while these concepts weren’t used, they were part of a fun and creative process. We ultimately went with a simple flat fire animation that best matched the brand guidelines.
Form submitted – success
I created this animation as a reward for users after completing a lengthy survey. The graphic is a recreated and modified version of an illustration I saw on Freepik (credit where it’s due). I adapted it to fit the app’s style and brought it to life with animation to enhance the user experience.
Here are a few more sample microanimations I created for mobile applications. Each was designed to enhance user interaction and add a touch of delight to the experience!
Bonus : Animations from Keyshit (product reders)
