Autumn Sale50% offCOMPOT
Texts & TypographyFree ComponentiOS 16.0+Xcode 15+

Text Dissolve Animation

Smooth cross-fade transition cycling through different phrases.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
textDissolveAnimation.swift
import SwiftUI

struct UseTextDissolveAnimation: View {
    
    var body: some View {
        VStack {
            TextDissolveAnimation(textsToAnimate: ["We stay hungry.", "We stay foolish.", "We promise.", "Thank you Steve!"])
        }
        .padding()
    }
}

#Preview {
    UseTextDissolveAnimation()
}

struct TextDissolveAnimation: View {
    
    var textsToAnimate: [String]
    @State private var animatedText: String = ""
    @State private var currentIndex: Int = 0
    @State private var isAnimating: Bool = false
    @State private var showText: Bool = true
    @State private var showStartButton: Bool = false
    
    var body: some View {
        VStack {
            if showStartButton {
                Button {
                    restartAnimation()
                } label: {
                    HStack {
                        Text("Repeat")
                        Spacer()
                        Image(systemName: "arrow.circlepath")
                    }
                    .font(.headline)
                    .padding(.vertical, 8)
                    .padding(.horizontal, 12)
                }
                .buttonStyle(.borderedProminent)
                .padding()
            } else {
                Text(animatedText)
                    .font(.system(size: 20, weight: .light))
                    .padding()
                    .opacity(showText ? 1 : 0)
                    .scaleEffect(showText ? 1 : 1.5)
                    .animation(.easeInOut(duration: 1.0), value: showText)
            }
        }
        .onAppear {
            animateText()
        }
    }
    
    private func animateText() {
        guard currentIndex < textsToAnimate.count else { return }
        
        let text = textsToAnimate[currentIndex]
        animatedText = text
        showText = true
        isAnimating = true
        
        // Display the text for a while before hiding it
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            showText = false
            
            // Check if it's the last text
            if currentIndex == textsToAnimate.count - 1 {
                // Show the "Start" button after the last text disappears
                DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    showStartButton = true
                }
            } else {
                // Move to the next text after hiding the current one
                DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    currentIndex += 1
                    animateText()
                }
            }
        }
    }
    
    private func restartAnimation() {
        currentIndex = 0
        animatedText = ""
        showStartButton = false
        animateText()
    }
}

Ready to copy and paste directly into any Xcode project running iOS 16.0+.

Recommended Use Cases

  • First-run onboarding flows and feature introductions
  • Paywalls, upgrade prompts, and subscription tiers

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Free
Themes & Contexts
onboardingpaywall
Keywords
animationtextdissolvefadetransition
C

Compot for iOS

Native SwiftUI playground app

Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.

Get Compot on the App Store