Global Transition
The global transition is the Swisscom approach for page transitions. It defines a standard animation that can be used across all templates: a slide-fade effect applied when sections enter the viewport.
Transition specs
- Effect: Slide in from below + fade in
- Opacity: 0 → 100%
- Transform: translateY (-10px) → 0
- Duration: 800m
- Easing: cubic-bezier(0.31, 1, 0.64, 1)
This keeps motion consistent across the system while remaining lightweight. It’s generally baked into templates, not individual components.
