Marquee Text: Auto-scrolling Text and Custom Loops

Marquee text automatically scrolls for long content, ideal for titles, alerts, and news tickers.

Basic Marquee

Text(
    text = "This is a long scrolling text that will move across the screen",
    modifier = Modifier
        .basicMarquee()
        .fillMaxWidth(),
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

Animated Marquee

var offset by remember { mutableStateOf(0f) }

LaunchedEffect(Unit) {
    while (true) {
        offset += 2f
        if (offset > 500f) offset = -500f
        delay(16)
    }
}

Text(
    text = "Scrolling News Ticker",
    modifier = Modifier
        .fillMaxWidth()
        .graphicsLayer {
            translationX = offset
        }
)

With Animation

val infiniteTransition = rememberInfiniteTransition()
val offset by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 300f,
    animationSpec = infiniteRepeatable(
        animation = tween(4000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    )
)

Text(
    "Animated Marquee",
    modifier = Modifier.graphicsLayer {
        translationX = offset
    }
)

Marquee text draws attention to important information while keeping UIs compact and dynamic.

---

8 Android app templates available on Gumroad