Components

ScrollTransition

ScrollTransition adapts SwiftUI's scrollTransition modifier into an explicit wrapper for web layouts.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Opacity

Loading preview…

Code
'use client';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { ScrollTransition } from '@swiftuijs/ui';
export default function Example() {
    return ((<VStack spacing={12}>
      <ScrollTransition transition="opacity" phase="topLeading">
        <Text>Upcoming headline</Text>
      </ScrollTransition>
      <ScrollTransition transition="identity" phase="identity">
        <Text>Current headline</Text>
      </ScrollTransition>
    </VStack>));
}

Status: adapted

Usage and limitations

  • Uses CSS effects driven by phase and active props. Scroll position is not observed automatically; update those props from application scroll logic.

More examples

Scale

API reference

PropTypeRequiredDescription
transition'identity' | 'opacity' | 'scale'No—
phase'identity' | 'topLeading' | 'bottomTrailing'No—
axis'vertical' | 'horizontal'No—
activebooleanNo—

Inherits additional props from IBaseComponent.