Fade Transition
Smoothly transition pages with fade in/out effects
Fade Transition
The Fade transition is the most basic yet elegant page transition effect. It provides a smooth transition where the current page gradually fades out while the new page fades in.
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>
);
}
Options
The fade transition allows customization of spring animation settings:
fade({
spring: {
stiffness: 300, // Spring stiffness (default: 300)
damping: 30 // Damping ratio (default: 30)
}
})
Spring Options Explained
- stiffness: Controls the speed of the animation. Higher values result in faster transitions
- damping: Controls the bounce of the animation. Higher values result in smoother transitions
Usage Examples
Slow Fade
Smooth and slow fade effect:
const config = {
defaultTransition: fade({
spring: {
stiffness: 100,
damping: 20
}
})
};
Fast Fade
Quick and snappy fade effect:
const config = {
defaultTransition: fade({
spring: {
stiffness: 500,
damping: 40
}
})
};
Route-Specific Application
const config = {
transitions: [
{
from: '/home',
to: '/about',
transition: fade(),
symmetric: true // Automatically applies fade for /about → /home
}
]
};
<Ssgoi config={config}>
{/* App content */}
</Ssgoi>
How It Works
The fade transition works as follows:
- Outgoing page: Opacity decreases from 1 to 0
- Incoming page: Opacity increases from 0 to 1
- Both animations run simultaneously creating a natural crossfade effect
Advantages
- Universal transition suitable for all content types
- Lightweight animation with minimal CPU/GPU impact
- Visually smooth and professional appearance
- Direction-agnostic, works naturally with any navigation pattern
Recommended Use Cases
- Default page transitions
- Navigation between unrelated content pages
- When a calm and elegant user experience is needed
- Performance-critical mobile environments