Swift
iOS Development
Animation
Fade In Effect
Programming Tutorial

Make a simple fade in animation in Swift?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

The simplest fade-in animation in UIKit is just an alpha change wrapped in UIView.animate. The view starts transparent, the animation moves alpha toward 1, and UIKit interpolates the transition over time. The pattern is small, but getting the initial state and timing right matters more than people expect.

Basic Fade-In With UIView.animate

The minimal implementation looks like this:

swift
1import UIKit
2
3final class ViewController: UIViewController {
4    private let card = UIView()
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8        view.backgroundColor = .systemBackground
9
10        card.backgroundColor = .systemBlue
11        card.frame = CGRect(x: 60, y: 160, width: 200, height: 120)
12        card.alpha = 0
13        view.addSubview(card)
14
15        UIView.animate(withDuration: 0.6) {
16            self.card.alpha = 1
17        }
18    }
19}

The important setup is card.alpha = 0 before the animation begins. If the view already starts at 1, there is nothing to animate.

Add Delay And Easing

Fade-ins often look better with a small delay or an easing curve.

swift
1UIView.animate(
2    withDuration: 0.8,
3    delay: 0.2,
4    options: [.curveEaseInOut],
5    animations: {
6        self.card.alpha = 1
7    }
8)

This is still the same fundamental animation. You are just controlling the pacing.

Fade In After An Async Event

A common real-world use case is showing a view only after data finishes loading or an image becomes ready.

swift
1func showCardWhenReady() {
2    card.alpha = 0
3
4    DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
5        UIView.animate(withDuration: 0.4) {
6            self.card.alpha = 1
7        }
8    }
9}

The actual trigger could be a network callback, image decode completion, or view model update. The animation code stays the same.

Put The Fade-In In A Reusable Helper

If several screens need the same effect, move it into an extension.

swift
1import UIKit
2
3extension UIView {
4    func fadeIn(duration: TimeInterval = 0.3) {
5        alpha = 0
6        isHidden = false
7
8        UIView.animate(withDuration: duration) {
9            self.alpha = 1
10        }
11    }
12}

Then call:

swift
card.fadeIn(duration: 0.5)

This keeps the intent clear and avoids repeating the same alpha boilerplate.

A Small But Important Detail: Hidden Views

If a view is hidden with isHidden = true, changing alpha alone may not produce the effect you expect. Unhide the view before or at the start of the animation.

That is why helpers often set isHidden = false before animating.

SwiftUI Has A Different Style

If the project uses SwiftUI instead of UIKit, the fade-in is usually described declaratively.

swift
1import SwiftUI
2
3struct ContentView: View {
4    @State private var visible = false
5
6    var body: some View {
7        Text("Hello")
8            .opacity(visible ? 1 : 0)
9            .onAppear {
10                withAnimation(.easeIn(duration: 0.5)) {
11                    visible = true
12                }
13            }
14    }
15}

The underlying idea is the same: animate opacity from invisible to visible.

Trigger The Animation At The Right Time

If the view depends on Auto Layout, network data, or a view transition, timing matters. Starting the animation too early can make it invisible because the view is not on screen yet or has not reached its final layout.

In UIKit, good places to trigger a fade-in include:

  • after adding the view to the hierarchy,
  • inside viewDidAppear if the screen transition should finish first,
  • after an async callback when the content is finally ready.

The animation API is simple, but the surrounding lifecycle still determines whether the effect feels polished or accidental.

Common Pitfalls

  • Forgetting to set the initial alpha to 0 before starting the animation.
  • Trying to fade a view that is still hidden with isHidden = true.
  • Running UI animation code off the main thread.
  • Repeating the same fade logic everywhere instead of extracting a helper.
  • Using a long duration for a simple appearance effect and making the UI feel sluggish.

Summary

  • A simple fade-in in UIKit is usually just alpha plus UIView.animate.
  • The view must start transparent or the animation will not be visible.
  • Delay and easing options improve pacing without changing the core approach.
  • Reusable helpers keep fade-in behavior consistent across screens.
  • In SwiftUI, the equivalent idea is animating opacity.

Course illustration
Course illustration

All Rights Reserved.