Understanding CSS Animations and Keyframes
CSS animations are more powerful than most designers realize. Learn how keyframes work, how to control timing and easing, and when to use CSS versus JavaScript for your motion effects.
Read ArticleMeet the Designer
Senior Curriculum Designer & Motion Design Specialist
MotionLearn Singapore Pte Ltd
Designing interfaces that don’t just work—they feel right. 12 years of animation and micro-interaction expertise across finance, e-commerce, and SaaS.
Professional Background
Started at a digital agency in Sentosa, where I discovered that animation could be far more than decoration. It’s a language for communicating with users.
Transitioned into specialized animation work, focusing on how small interactions create meaningful user experiences. This shift changed everything about how I approach design.
Led interaction redesign for a fintech platform, reducing user confusion by 40% through strategic micro-animations. This project proved that thoughtful motion design directly impacts business metrics.
Joined MotionLearn Singapore to create accredited animation and micro-interaction courses. My mission is simple: distill years of real-world experience into practical lessons that designers can use immediately.
What I Do
Animation and micro-interaction design for web applications, with focus on translating complex user behaviors into smooth, intuitive experiences.
Small animations that create big impact. Feedback states, loading indicators, transitions—every interaction tells users something about what’s happening.
CSS animations, JavaScript motion libraries, and SVG animation techniques. I teach both the technical how-to and the design principles behind effective motion.
Designing how users move through interfaces. Understanding psychology, anticipation, and feedback creates experiences that feel natural and responsive.
Creating SkillsFuture-accredited courses that bridge the gap between theory and practice. Every lesson comes from real design problems I’ve solved.
I’ve mentored 300+ designers through my professional programs. Teaching reinforces what I believe: good design comes from asking better questions.
Finance, e-commerce, SaaS—I’ve worked across sectors where animation must serve function. Every motion has a purpose in the larger user journey.
Design Philosophy
That’s my core belief. Good animation is felt, not seen. When users interact with an interface you’ve designed, they shouldn’t stop to admire the transitions—they should simply feel that the system understands them.
I started as a junior designer thinking bigger animations were always better. More bounce, more movement, more spectacle. But I quickly learned that the most powerful animations are often the smallest ones. A 200-millisecond fade that confirms a button press. A subtle scale change that shows focus. These micro-interactions create trust.
The fintech project I led in 2018 taught me this lesson at scale. We removed flashy animations and replaced them with purposeful micro-interactions that guided users through complex financial workflows. User confusion dropped 40%. No one noticed the animations—they just noticed the process felt less confusing.
That’s why I’m passionate about teaching. Most designers don’t understand the psychology behind motion. They see animation as decoration. I want to shift that perspective. Animation is communication. It’s problem-solving. It’s the difference between an interface that works and one that feels like it understands you.
Good animation shouldn’t be noticed—it should be felt.
Qualifications
Teaching Method
Every lesson starts with an actual design challenge I’ve faced. Not hypothetical scenarios. Not generic examples. Real problems from real projects that taught me something.
Understanding why motion works matters more than knowing which library to use. I teach the principles first—anticipation, timing, easing—then show how tools implement them.
My courses aren’t lectures. They’re workshops. Students design, animate, test, and iterate. You’ll build real projects that you can add to your portfolio immediately.
Every project gets reviewed. I show what’s working, what isn’t, and why. Critique isn’t about criticism—it’s about growth. That’s how I learned, and that’s how my students learn.
Resources
Deep dives into animation, interaction design, and web development techniques I’ve learned over 12 years.
CSS animations are more powerful than most designers realize. Learn how keyframes work, how to control timing and easing, and when to use CSS versus JavaScript for your motion effects.
Read ArticleThe best micro-interactions are invisible. They guide users without demanding attention. I’ll walk you through the psychology and practical techniques for designing interactions that feel natural and responsive.
Read ArticleResponsive design is about more than screen sizes. It’s about creating layouts that feel right on every device. Flexbox, CSS Grid, and modern techniques for building fluid, adaptive interfaces.
Read ArticleSometimes CSS isn’t enough. JavaScript gives you granular control over complex animations. I’ll show you libraries, frameworks, and techniques for building sophisticated motion interactions.
Read ArticleI teach SkillsFuture-accredited courses at MotionLearn Singapore. Whether you’re starting with CSS animations or diving into advanced JavaScript motion libraries, there’s a program for you.