Solo can fade each region in as it scrolls into view. This video turns it on and, more usefully, explains the four situations in which Solo deliberately refuses to run it.
Turning it on
The checkbox is Tick this box to animate opacity while scrolling down, on the Interface Behavior tab of Global Site Settings. It is off by default. With it ticked, a region starts at zero opacity and fades to full as its top edge crosses the lower part of the viewport.
What gets animated
Not arbitrary elements — Solo marks the inner wrapper of its regions in the templates. That covers the top, main, bottom and footer region groups plus the page title, the breadcrumb and the footer menu strip. Individual blocks inside a region fade together with the region, which is what stops the effect looking like confetti.
The four times it does not run
- Admin pages. The library is not even attached on an administrative route, so editing is never animated.
- Reduced motion. If the visitor's system asks for reduced motion, every element is set to full opacity with transitions switched off. This is checked on load and re-checked on resize.
- Narrow screens. Below your menu breakpoint the animation is disabled and content shows immediately.
- Layout Builder. The behaviour bails out entirely when the Layout Builder interface is present, so you are never dragging a component that is fading.
What it costs
The implementation is careful: an IntersectionObserver narrows the work to elements actually near the viewport, scroll handling is throttled to roughly one frame at 60fps, resize handling is debounced, updates go through requestAnimationFrame, and listeners are registered as passive so they never block scrolling. Even so, this is opacity animation on large containers — measure it. If the site is already fighting for its Largest Contentful Paint score, read improving Largest Contentful Paint before switching it on, and check a mid-range phone rather than your desktop.
No module is required and the feature works across every core version Solo supports (^10.1 || ^11 || ^12). The theme is on the Solo theme page.
If you would rather have this set up for you, Drupal theming services covers the work, and recent projects show the result.
