Medicine Website Animation

Overview I worked with a medical brand to bring their website to life by animating key imagery. The client provided static emoji-style icons, which I redesigned and then animated. The final deliverables included Lottie JSON, GIF, and lightweight web animations layered over their existing images.

Transform static emoji icons into expressive, animated visuals.

Add motion to the client’s website images to make the interface more engaging and trustworthy.

Deliver animations that feel professional, yet approachable, suitable for a medical audience.

Redesign the Emojis: I started by reworking the client’s original emoji images, giving them a cleaner vector form to better suit animation.

Design Vector Versions: I converted the redesigned emojis into vector shapes, making them animation-friendly while preserving the client’s brand tone.

Animate in After Effects: I animated the vector icons with subtle movement (bouncing, scaling, rotation) and added micro-interactions. I also layered motion over existing website images (e.g., background images or section graphics) to provide enhanced feedback and engagement.

Export & Optimize: Used Bodymovin to export Lottie JSON files. I also produced GIFs to demonstrate motion in contexts where Lottie might not be supported. I paid close attention to file size, optimizing the animation paths and simplifying effects for faster loading.

Translating the brand’s original emoji-style icons into clean, animatable vector versions.

Balancing expressiveness with professionalism, especially given the medical context.

Keeping animations lightweight and performant for both Lottie and GIF outputs.

Delivered a set of animated icons and image-overlay motion that make the website feel more dynamic and engaging.

The redesigned emojis retain the brand’s character but now offer subtle expressions and interactive feel.

The Lottie animations integrate smoothly on the site, and GIFs provide fallback where needed, maintaining performance across platforms.