The Outsiders Progress Graph Color Change Interaction

This interaction showcases a seamless accent color transition across multiple UI elements when switching tabs. Tapping on different fitness metrics (Training Load, Duration, Distance, Elevation Gain) triggers a synchronized color morph. The active tab background, graph data points, percentage change indicators, and the top-right profile icon all transition their color simultaneously. Additionally, the horizontal tab bar can be scrolled smoothly to reveal off-screen metrics, and the graph data crossfades to reflect the newly selected category.