SwiftUI.js
Components

ScrollTransition

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

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

Examples

Opacity

Preview unavailable for this example in the static docs build.

Show code
<VStack spacing={12}>
      <ScrollTransition transition="opacity" phase="topLeading">
        <Text>Upcoming headline</Text>
      </ScrollTransition>
      <ScrollTransition transition="identity" phase="identity">
        <Text>Current headline</Text>
      </ScrollTransition>
    </VStack>

Variants

Preview unavailable for this example in the static docs build.

Show code
<ScrollTransition transition="scale" phase="bottomTrailing">
      <Text>Compact card</Text>
    </ScrollTransition>

API

PropTypeRequiredDescription
transition'identity' | 'opacity' | 'scale'NoNo description yet.
phase'identity' | 'topLeading' | 'bottomTrailing'NoNo description yet.
axis'vertical' | 'horizontal'NoNo description yet.
activebooleanNoNo description yet.

Inherits additional props from IBaseComponent.

Overview

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

Status: adapted

On this page