Animations on the component level are not required and not provided as out-of-the-box in SDX – rather, this page serves as guidance for designing motion purposefully and consistently.
The motion patterns listed below are intended for use in contexts where motion adds value, for example, in campaign pages, sales-driven content, or storytelling sections. The examples illustrate common animation patterns already in use in the Swisscom universe.
Build
Similar or identical elements animate in from different directions – top, bottom, left, or right — to visually “build” the composition. They may appear with a slight delay after each other on page load or once the element enters the viewport.
Recommended for modular layouts like card groups, feature rows, or multi-column sections.
Parallax
One element stays visually fixed while others move at different speeds during scroll, creating a layered, depth effect. Parallax can be used to add subtle visual interest and draw focus to key elements by creating contrast in motion.
Recommended for storytelling sections or hero areas where depth can enhance the visual experience without distracting from the content.
Zoom
An element transitions between a larger state and a smaller embedded state – or vice versa – creating a zoom-in or zoom-out effect.
This transition can help connect immersive content with more structured layouts, maintaining a sense of spatial relationship between views.
Idle
An animation that triggers after a short delay to draw passive attention to an element, without requiring user interaction.
Common patterns include a slight shake or flip, used to hint at interactivity or nudge engagement after a moment of inactivity.
Recommended for components like cards or buttons where a gentle visual cue can signal action potential.
Autoplay Slides or Video
Autoplay adds energy and keeps the interface visually active, but should be used carefully to avoid overwhelming users or disrupting focus. It’s important to consider timing, sound, and user control to meet accessibility requirements.
Recommended for hero sections, product highlights, or campaign modules, especially when motion is part of the storytelling.