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:
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.
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.
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.
Then call:
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.
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
viewDidAppearif 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
alphato0before 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
alphaplusUIView.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.

