How to Implement fade in/out Animation on a Text using Jetpack Compose

Last Updated : 04 Mar, 2025

Jetpack Compose is a modern toolkit for building native Android UIs in the Android Development process, by using Jetpack Compose we can implement or create so many types of animations in Android easily. On texts using jetpack compose we can also implement multiple kinds of animations, One animation we can implement on a text is text fade in/out animation.

What is Text fade in/out animation?

Text fade-in/out animation refers to the process of appearance or disappearance of a text on the mobile screen, text fade-in/out animation can enhance the user experience by adding visual appeal and guiding the user's attention to the specific line or paragraph.

In this post we will explain how to implement fade-in/out animation on a Text using Jetpack Compose in an Android project.

Step by Step Implementation

To implement the Text fade in/out Animation using Jetpack compose in Android follow these steps:

Step 1 : Create a New Project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Note: Select Kotlin as the programming language.

Step 2 : Working with MainActivity.kt file

Create a new composable TextFadeAnimation and call the method in MainActivity.kt file to display text fade in/out animation.

MainActivity.kt:

MainActivity.kt

package com.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.*
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.*
import com.geeksforgeeks.demo.ui.theme.DemoTheme
import kotlinx.coroutines.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoTheme(dynamicColor = false, darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.White
                ) {
                    TextFadeAnimation()
                }
            }
        }
    }
}

@Composable
fun TextFadeAnimation() {
    var visibility by remember { mutableStateOf(true) }
    val coroutineScope = rememberCoroutineScope()

    LaunchedEffect(Unit) {
        coroutineScope.launch {
            while (true) {
                
                // Toggle visibility
                visibility = !visibility
                
                // Delay to control the toggle frequency
                delay(2000) 
                
                // Adjust delay as needed
            }
        }
    }

    Box(
        contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()
    ) {
        AnimatedVisibility(
            visible = visibility,
            enter = fadeIn(animationSpec = tween(durationMillis = 1100)),
            exit = fadeOut(animationSpec = tween(durationMillis = 1100))
        ) {
            
            // Message text
            Text(text = "Hello, GeeksForGeeks!", fontSize = 24.sp)
        }
    }
}