Friendliness & Approachability Animation
Create animations that welcome users and make interfaces feel warm and inviting.
Emotional Goal
Friendliness comes from gentle, welcoming motion that doesn't intimidate. Approachability means animations that invite interaction and make users feel comfortable.
Disney Principles for Friendliness
Squash & Stretch
Moderate, soft deformation (10-20%). Enough to feel alive without being cartoonish. Like a friendly handshake—warm but appropriate.
Anticipation
Gentle preparation (100-150ms). Friendly motion telegraphs intention without startling. A small "hello" before action.
Staging
Open, inviting compositions. Elements arranged to welcome, not confront. Clear pathways into the interface.
Straight Ahead Action
Light spontaneity for personality. Subtle variations that feel human and approachable rather than mechanical.
Follow Through & Overlapping Action
Soft, natural settling. A gentle bounce or two. Like a friend sitting down beside you—relaxed, not rigid.
Slow In & Slow Out
Smooth, approachable curves. No sharp accelerations. ease-out for welcoming entrances that arrive gently.
Arc
Natural, relaxed curves. Motion that feels human—not robotic straight lines, not exaggerated bounces.
Secondary Action
Warm supporting gestures. A subtle wave, a gentle nod. Elements acknowledge user presence.
Timing
Moderate, comfortable (200-350ms). Not rushed, not sluggish. Conversational pacing that feels natural.
Exaggeration
Mild (10-20%). Enough personality to feel warm without being overwhelming. Relatable, not theatrical.
Solid Drawing
Soft, rounded forms. Approachable proportions. Nothing sharp or intimidating.
Appeal
Warm colors, rounded corners. Friendly faces when appropriate. Inviting, accessible aesthetics.
Timing Recommendations
| Element | Duration | Easing |
|---|---|---|
| Welcome fade | 250-350ms | ease-out |
| Slide in | 300-400ms | ease-out |
| Hover response | 150-200ms | ease-out |
| Expand/reveal | 250-350ms | ease-in-out |
CSS Easing
--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--friendly-enter: cubic-bezier(0.0, 0, 0.2, 1);
--friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);Welcoming Patterns
@keyframes friendly-wave {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(14deg); }
40% { transform: rotate(-8deg); }
60% { transform: rotate(10deg); }
80% { transform: rotate(-4deg); }
}
@keyframes friendly-appear {
from {
opacity: 0;
transform: scale(0.95) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}Approachability Cues
- Respond to hover with gentle acknowledgment
- Animate toward the user, not away
- Use soft shadows, not hard edges
- Elements should feel reachable
- Avoid overwhelming or confrontational motion
When to Use
- Customer support interfaces
- Onboarding flows
- Community platforms
- Healthcare portals
- Educational apps
- Small business websites
- Personal portfolios
- Chatbots and assistants