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
phaseandactiveprops. Scroll position is not observed automatically; update those props from application scroll logic.
More examples
Scale
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
transition | 'identity' | 'opacity' | 'scale' | No | — |
phase | 'identity' | 'topLeading' | 'bottomTrailing' | No | — |
axis | 'vertical' | 'horizontal' | No | — |
active | boolean | No | — |
Inherits additional props from IBaseComponent.