Getting Started with CSS Animations
A practical guide to CSS animations for designers who want to add motion without JavaScript. Covers keyframes, timing functions, and common pitfalls.
Read Article
Web Design Instructor
Marcus Wong
Senior Web Animation Instructor & Design Lead
MotionStudio HK Limited
Specializes in designing and teaching animation-driven interfaces and micro-interactions for high-end web applications used by Causeway Bay digital agencies.
14
Years Experience
300+
Designers Mentored
80+
Agencies Consulted
About Marcus
A designer’s journey from Flash animations to modern web motion
Marcus discovered his passion for interactive design while studying at Hong Kong Polytechnic University, where he spent countless hours experimenting with Flash and early JavaScript animation libraries. After graduating in 2010, he joined a boutique Causeway Bay agency as a junior designer, quickly advancing to lead animator and eventually creative director.
Over the past decade and a half, he’s transitioned from traditional animation into modern web technologies, becoming fluent in CSS-in-motion, JavaScript animation frameworks, and accessibility-compliant micro-interactions. What drives Marcus is the intersection of aesthetic refinement and functional elegance—he believes animations should serve user needs, not distract from them.
His work has been featured in international design publications, and he’s mentored more than 300 designers in mastering CSS animations, SVG motion, and interaction design principles.
At MotionStudio HK Limited, he’s developed a comprehensive curriculum that’s trained designers from startups to Fortune 500 companies operating in Hong Kong. His teaching draws on real-world projects he’s executed for Causeway Bay agencies handling everything from fintech interfaces to e-commerce platforms. Marcus brings production experience to every lesson—he’s not teaching theory in a vacuum. He’s teaching what actually works because he’s built it himself.
Areas of Specialization
Expertise built through 14 years of hands-on design and teaching
CSS Animation & Motion Design
Deep expertise in CSS transitions, keyframe animations, and transform-based motion. Teaches performance-first techniques that don’t sacrifice smoothness for speed.
Micro-Interactions & Polish
The art of subtle, purposeful animations that guide users and create delight. From button states to scroll triggers, every interaction has intention.
JavaScript Animation Frameworks
Proficient with GSAP, Framer Motion, Three.js, and vanilla JavaScript. Knows when to use each tool and when to stick with CSS for performance.
Accessible Motion Design
Animations that respect prefers-reduced-motion and don’t cause vestibular issues. Beautiful motion doesn’t require animation sickness.
Performance Optimization
Knows the difference between jank and smooth 60fps. Teaches GPU acceleration, paint timing, and how to measure what actually matters.
Curriculum Development
Built MotionStudio’s animation and micro-interaction courses from the ground up. Each course reflects real agency workflows and client expectations.
Teaching Philosophy
How Marcus approaches education and design
Marcus doesn’t believe in teaching animation for animation’s sake. Every motion should earn its place on the page. Does it guide the user’s eye? Does it provide feedback? Does it reduce cognitive load? If the answer’s no, it doesn’t belong there.
His courses are grounded in real projects. You won’t spend weeks on abstract theory—instead, you’ll work through scenarios Marcus has actually faced: fintech dashboards that need to communicate financial data without overwhelming users, e-commerce sites that use motion to build trust, and interfaces that feel responsive without being over-animated.
He’s also big on accessibility. An animation that causes motion sickness or disorients users with vestibular issues isn’t innovative—it’s harmful. That’s why respecting prefers-reduced-motion and understanding timing curves isn’t optional in his curriculum. It’s fundamental.
“Animations should serve user needs, not distract from them. If you can remove it and the interface still works just as well, it probably shouldn’t be there.”
His Approach
01
Learn by Building
Not endless tutorials. Real projects with constraints, feedback, and iteration.
02
Understand the Why
Know performance implications, accessibility concerns, and user psychology—not just syntax.
03
Test with Real Users
Animation decisions backed by user research, not guesswork or trends.
04
Ship Production Code
Every technique you learn should be ready to deploy in a live project.
Background & Experience
Education, positions, and key milestones
Education
Bachelor of Design (Interaction Design) from Hong Kong Polytechnic University School of Design, 2010
Professional Journey
Started as Junior Designer at Causeway Bay agency (2010), progressed to Lead Animator and Creative Director before joining MotionStudio HK in 2015
Published Work
Featured in international design publications including Web Designer Magazine and Design Observer. Work focuses on practical animation implementation.
Industry Reach
Consulted with 80+ agencies across Hong Kong. Worked on projects ranging from fintech platforms to e-commerce interfaces to Fortune 500 digital initiatives.
Featured Articles
Deep dives into animation, motion design, and practical web techniques
Micro-Interactions That Feel Natural
How to design subtle interactions that guide users and create delight. Includes real examples from fintech and e-commerce interfaces.
Read ArticlePlanning Animations Before You Code
Why planning matters more than execution. Learn the frameworks Marcus uses with agencies to scope animation work and align stakeholder expectations.
Read ArticlePerformance Optimization for Smooth Motion
The difference between 60fps and janky animations. Covers GPU acceleration, paint timing, composite layers, and tools to measure what matters.
Read ArticleExplore Animation & Motion Design
Interested in learning web animation and micro-interaction design? Discover MotionStudio’s courses and resources, built on real-world agency experience.