Text Dissolve Animation
Smooth cross-fade transition cycling through different phrases.
SwiftUI Implementation
Pure Vanilla Swift • No DependenciestextDissolveAnimation.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
- Category
- Texts & Typography
- 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 StoreRelated SwiftUI Components
More components in Texts & Typography and related app architectures.
ButtonsiOS 16.0+
Primary Button Basic
High-emphasis prominent action button with standard SwiftUI prominence styling and haptic feedback.
View Component & Code
ButtonsiOS 16.0+
CTA Button Large Basic
Full-width, high-impact call-to-action button designed for onboarding screens, welcome flows, and paywalls.
View Component & Code
ButtonsiOS 16.0+
Secondary Button Basic
Medium-emphasis secondary action button styled for alternative user workflows and dismissal actions.
View Component & Code