Marcus Tan
Designing micro-animations and loading states that feel fast. Working across Southeast Asia’s most demanding digital platforms since 2012.
FlowState Studio Pte Ltd
Micro-Animation and Loading State Design
Specializing in high-performance animation systems for Singapore’s fast-paced digital ecosystem. Every frame counts when users expect sub-second interactions.
Micro-Animations
Brief, polished animations that enhance user experience without adding perceived delay. Typically 200–400ms total duration, designed to feel intentional rather than decorative.
Branded Skeleton Screens
Loading states that maintain visual consistency with brand identity while reducing cognitive load. Proprietary framework adopted by 15+ regional organizations since 2018.
Smooth Transitions
Seamless effects between page sections and views that guide user attention without jarring interruptions. Every transition optimized for both speed and visual polish.
Performance-First Design
Animation frameworks engineered from performance budgets backward. If the target is 3-second page load, animations fit within millisecond constraints—not the other way around.
User Perception Mapping
Understanding local expectations. Singapore’s digital audience has different speed perceptions than Western markets—Marcus optimizes for actual user behavior, not generic benchmarks.
Animation Systems
Scalable frameworks for teams. Instead of one-off animations, Marcus builds reusable systems that let developers ship consistent, performant motion without reinventing the wheel.
The Craft Behind the Motion
How did you end up specializing in micro-animations?
It wasn’t the plan initially. I graduated from NUS Architecture in 2012 thinking I’d design buildings. But I got pulled into a digital project during my final year—visualizing spaces in 3D for real estate clients. That was my first taste of motion design, and honestly, it clicked immediately. The timing, the easing, the way a small animation could guide someone’s eye or confirm an action—it felt like the same principles as architectural space, just compressed into milliseconds instead of meters.
I moved into product design around 2014, bounced between startups and agencies, and gradually noticed a gap. Everyone was obsessed with beautiful animations—long, elaborate transitions that looked incredible in demos. But in real products, especially fast-moving platforms here in Singapore, those animations felt sluggish. Users hated them. That’s when I started thinking differently about motion. What if animations were invisible? What if they only existed to reduce friction, not to impress?
You mention Singapore’s speed expectations a lot. What’s actually different here?
The market moves fast and users notice delays immediately. If you’re working on a fintech app or an e-commerce platform in Singapore, you’re competing with platforms that’ve optimized every millisecond. A 300ms delay feels like a freeze. It’s not just technical—it’s cultural. There’s an expectation that things work instantly.
But here’s what’s interesting: that constraint is actually liberating. It forces you to be ruthless about animation. You can’t add something just because it looks nice. Every frame has to earn its place. So I’ve developed a methodology where I reverse-engineer animations from performance budgets. Client says, “We need 3-second page loads.” I map out where animations fit within that 3 seconds, typically keeping total animation duration to 200–400ms across the entire experience. It sounds restrictive, but the work gets tighter and more intentional because of it.
What’s your philosophy on loading states?
Loading states are your chance to be honest with the user. You’re saying, “Something’s happening, please wait.” Most teams treat them as an afterthought—a generic spinner or a placeholder gray box. But that moment matters. It’s when users form opinions about your app’s quality and speed.
Around 2018, I started designing branded skeleton screens—loading states that match your product’s visual language instead of generic placeholders. It sounds cosmetic, but it actually changes perceived performance. Users see a skeleton screen that looks intentional and designed, and they feel like the app is moving faster. We measured a 23% improvement in perceived load time on average across clients. That’s the power of thoughtful animation. You’re not actually making things faster—you’re making them feel faster through design.
What does “invisible animation” actually mean?
Great micro-animations are invisible. You notice when they’re missing—a button that doesn’t respond visually feels broken, a page transition that’s too abrupt feels jarring. But when they’re done right, you don’t consciously see them. They just make the experience feel smooth and responsive.
I’m always suspicious of animations that draw attention to themselves. If I’m showing a client an animation and they go “Wow, that’s beautiful,” I usually think about whether it’s actually serving the user or just serving my ego as a designer. The goal is for animations to be functional and elegant simultaneously. A 300ms fade-out when a modal closes isn’t “beautiful,” but it guides the user’s attention and makes the interaction feel deliberate. That’s the work.
You’ve worked with 40+ enterprise clients. What’s the most common mistake you see?
Animations designed in isolation. Teams will nail a beautiful loading animation or a smooth page transition in their design tool, then drop it into a live product where it’s surrounded by five other animations, inconsistent easing functions, and competing visual priorities. Suddenly it feels chaotic.
That’s why I’m obsessed with animation systems now. Instead of designing individual animations, you design a framework. You establish easing curves, timing rules, and principles that apply across your entire product. Then every animation, no matter who designs it, feels cohesive. It’s like the difference between random decorative elements and a well-planned interior space. The system makes everything work together.
Experience and Education
Current Role
Senior Interaction Design Specialist
FlowState Studio Pte Ltd
2020–Present
Leading animation strategy and micro-interaction design for 40+ enterprise clients across fintech, e-commerce, and SaaS platforms in Southeast Asia.
Professional History
Design Lead, Motion and Interaction
Regional Digital Agency (Unnamed)
2016–2020
Directed animation and interaction design for 30+ digital products. Developed early versions of branded skeleton screen methodology.
Product Designer, Digital
Series-B Fintech Startup
2014–2016
Designed interactions and micro-animations for mobile banking platform serving 200k+ active users across Singapore and Malaysia.
Junior Interaction Designer
Digital Agency
2012–2014
First role post-graduation. Designed web and mobile interfaces for real estate, e-commerce, and enterprise clients.
Education
Bachelor of Architecture (Honors)
National University of Singapore
2008–2012
Focus on digital visualization and spatial design. Thesis on 3D interface design for architectural practice.
Certifications and Recognition
Advanced Animation Systems
Interaction Design Foundation
2019
Web Performance and User Perception
Nielsen Norman Group
2017
Design Excellence Award
Singapore Design Council
2019
Recognition for innovation in animation systems for enterprise platforms.
Notable Projects
Animation Framework Design
Regional E-Commerce Platform
Designed reusable animation system reducing development time by 40% while maintaining performance targets.
Loading State Strategy
Southeast Asian Fintech
Implemented branded skeleton screens across mobile app. Measured 23% improvement in perceived load time.
Page Transition System
Enterprise SaaS Platform
Developed smooth transition effects keeping animation duration under 300ms while improving perceived responsiveness.
What Drives the Work
Performance First, Aesthetics Second
Marcus doesn’t start with “How can I make this animation look beautiful?” He starts with “How fast does this need to happen?” The performance budget comes first. That constraint shapes everything—the easing curve, the duration, the complexity. It’s not a limitation; it’s a design principle.
Most designers reverse the order. They design something beautiful, then watch it drag down page load times. Marcus builds it the other way. A 3-second page load target becomes 40% content, 30% interaction, 30% animation. Every millisecond is accounted for. The animations that emerge from that framework are tighter and more intentional.
Invisible is Better Than Impressive
If someone watches a demo of your product and goes “Wow, that animation is beautiful,” you’ve probably failed. That animation should have gone unnoticed, should have felt like a natural part of the interaction. The goal isn’t to impress—it’s to guide. To confirm. To reduce friction.
The animations Marcus is proudest of are the ones nobody mentions. A button that responds instantly to a tap. A modal that closes smoothly. A page transition that feels fluid. Nobody goes home and says “The animations were amazing.” They just think “This app feels responsive.”
Local Context Matters
Animation design isn’t universal. Singapore’s digital culture has different expectations than San Francisco’s or London’s. Users here expect speed. They expect consistency. They’re impatient with delays. That’s not a weakness—it’s a design context. Understanding it shapes better work.
Marcus spends time with local teams, watches how users actually interact with products in the market, maps expectations. Then he designs backward from those expectations rather than applying generic Western best practices. It’s the difference between importing a solution and building one.
Systems Over One-Offs
Individual animations are easy. Building a system where dozens of animations feel cohesive? That’s hard. But that’s where the real impact happens. Instead of designing animation, Marcus designs animation language. Rules for easing. Timing patterns. Principles that developers can apply across a product without losing consistency.
It’s the difference between a beautifully choreographed dance and a full orchestra. Sure, one dancer can look incredible. But when 50 dancers are all following the same system, moving with the same principles, the whole thing comes alive. That’s what he’s chasing.
The Technical Challenge
Marcus gets excited about constraints. Most designers complain about budget limits or performance requirements. He loves them. A client says “We need animations to run on older Android devices.” Suddenly you’re optimizing every pixel, every frame. You’re learning about GPU acceleration, about rendering pipelines, about the real technical underpinnings of motion design.
That’s where the learning happens. The hard problems aren’t the aesthetic ones. They’re the technical ones. Can we maintain brand consistency in a skeleton screen while keeping the animation smooth on a 5-year-old phone? Can we transition between views in under 300ms without jarring users? Those are the questions that keep him engaged.
“Great micro-animations should be invisible—users notice when they’re missing, not when they’re present.”
Marcus Tan
Recent Articles
Deep dives into micro-animation, loading states, and performance-first design for Southeast Asian digital products.
Skeleton Screens That Actually Look Branded
Why generic gray placeholders damage perceived performance. Building loading states that maintain visual identity while reducing cognitive load during content transitions.
Read ArticleSmooth Transitions Between Page Sections
How to guide user attention through multi-view experiences without jarring interruptions. Timing, easing, and the psychology behind invisible motion design.
Read ArticleMinimal Animation Duration Without Feeling Cheap
Singapore’s speed expectations don’t mean sacrificing polish. How to design intentional micro-animations within strict 200–400ms budgets that still feel premium.
Read ArticleGet in Touch
Interested in animation strategy, micro-interaction design, or building performance-first motion systems for your product? Let’s talk.
Or explore FlowState Studio’s full range of design and development services .