Fade Transition

Smooth transition effect for context changes between content

Fade Transition

The fade transition is a fundamental transition pattern used when navigating between unrelated or distant content. The screen completely fades out before the new screen appears, clearly communicating that the user is leaving one area and entering a completely new one.

Demo

UX Principles

When to Use?

Fade transitions are used for Context Changes.

Content Relationship Suitability

Key Use Cases

• Top-level Navigation: Moving between sections in bottom tabs or sidebar menus
• Context Switching: Transitions between screens with no connection points
• Starting New Tasks: Entering completely different task flows

Why Does It Work This Way?

1. Clean Separation: Previous screen completely disappears before new screen appears, creating clear boundaries
2. Reduced Cognitive Load: Smooth fade reduces visual shock compared to abrupt screen changes
3. Universality: Direction-agnostic, naturally applies to any navigation pattern

Motion Design

Outgoing Screen: 100% → 0% opacity (quick fade out)
Brief Gap: Complete context separation
Incoming Screen: 0% → 100% opacity (smooth fade in)

This sequence provides users with the mental model of "leaving the previous space and entering a new space."

Basic Usage

import { Ssgoi } from '@ssgoi/react';
import { fade } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: fade()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* App content */}
    </Ssgoi>
  );
}

Practical Examples

1. Tab Navigation

Moving between major sections in bottom tabs or top tabs:

const config = {
  transitions: [
    {
      from: '/home',
      to: '/profile',
      transition: fade(),
      symmetric: true
    },
    {
      from: '/home',
      to: '/settings',
      transition: fade(),
      symmetric: true
    }
  ]
};

2. Quick Transitions (Immediate Response)

When quick response to user actions is needed:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 400,  // Fast transition
      damping: 35      // Smooth finish
    }
  })
};

3. Elegant Transitions (Premium Feel)

For pages where brand experience is important:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 150,  // Slow transition
      damping: 25      // Smooth deceleration
    }
  })
};

Accessibility

• Automatically disables animations when prefers-reduced-motion is set
• Screen readers correctly recognize content changes during transitions
• Fully compatible with keyboard navigation

Best Practices

✅ DO

• Use as default for top-level navigation
• Use when content completely changes
• When providing a mobile app-like experience

❌ DON'T

• Don't use for related content navigation (use slide or scroll instead)
• Avoid overly slow fades (users feel frustrated)
• Don't use for partial UI changes