Skip to content

Typewriter animation for SwiftUI Text, with customizable settings

Notifications You must be signed in to change notification settings

sndwvv/TypingAnimationSwiftUI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

TypingAnimationSwiftUI

Add a typewriter style of animation to a SwiftUI Text, with customizable settings (typing speed, backspacing, haptic feedback).

Previews

OnboardingViewExample.mp4
BackspacingTextExample.mp4

Implementation

Simply initialize the TypingTextView with a text string:

TypingTextView(text: "Hello, World!")

Adjust settings as needed. Make use of the completion block to do something after the animation is complete.

let fullText = "Hello, World!"
let settings = TypingTextSettings(
  typingSpeed: 0.04,
  backspaceSpeed: 0.01,
  delaySeconds: 1.0,
  isBackspaceEnabled: false,
  isHapticsEnabled: false
)
var body: some View {
  VStack {
    TypingTextView(
      text: fullText,
      settings: settings
    ) {
      // animation complete
    }
    .font(.system(size: 12, weight: .heavy))
    .foregroundColor(.primary)
    }
}
TypingTextSetting Description
typingSpeed Adjusts typing speed
backspaceSpeed Adjust backspacing / reverse typing speed
delaySeconds Adds a delay after backspacing is complete
style TypingTextStyle: add styling using one of the pre-made ViewModifiers
isBackspaceEnabled If true, text is fully typed then backspaced / removed
isHapticsEnabled Adds a haptic feedback every time a character is added or removed

Pass an array of texts and have it loop continuously (refer to LoopingTextExample.swift)

struct LoopingTextExampleView: View {
	
  let texts = Constants.quotes
  let settings = TypingTextSettings(
    typingSpeed: 0.04,
    backspaceSpeed: 0.01,
    delaySeconds: 1.0,
    style: .medium,
    isBackspaceEnabled: true,
    isHapticsEnabled: true
  )
	
  @State private var currentTypingIndex = 0
	
  var body: some View {
    VStack {
      TypingTextView(
        text: texts[currentTypingIndex % texts.count],
        settings: settings) {
          // Go to next text when the animation finishes
          currentTypingIndex += 1
        }
        .id(currentTypingIndex)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding(.horizontal)
        }
      }
}

Styling

Add modifiers to the end as usual:

TypingTextView(text: "Hello World")
  .foregroundColor(.brown)
  .font(.system(size: 20, weight: .bold))

Or create your own modifier and add to the settings as the TypingTextStyle:

enum TypingTextStyle {
  case plain
  case medium
  // add more
  
  func modifier() -> some ViewModifier {
    switch self {
      case .medium:
        return AnyViewModifier(MediumTypingTextStyle())
      default:
        return AnyViewModifier(EmptyModifier())
      }
    }
}

Upcoming

  • macOS compatibitlity

About

Typewriter animation for SwiftUI Text, with customizable settings

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages