Build: Animated Welcome Screen

This screen welcomes users with a smooth fade-in animation on the welcome text and a button that scales up when tapped, showing how animations make the app feel friendly and polished.

Target UI

-------------------------
|                       |
|      Welcome!          |
|                       |
|    [ Get Started ]     |
|                       |
-------------------------

Display a welcome text that fades in when the screen appears

Add a 'Get Started' button below the text

When the button is tapped, it should scale up briefly to show feedback

Use simple UIKit animations with UIView.animate

Keep the layout centered and accessible

Starter Code

iOS Swift

import UIKit

class WelcomeViewController: UIViewController {

    let welcomeLabel = UILabel()
    let getStartedButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Setup welcomeLabel
        welcomeLabel.text = "Welcome!"
        welcomeLabel.font = UIFont.systemFont(ofSize: 32, weight: .bold)
        welcomeLabel.alpha = 0 // Start hidden for fade-in
        welcomeLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(welcomeLabel)

        // Setup getStartedButton
        getStartedButton.setTitle("Get Started", for: .normal)
        getStartedButton.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: .medium)
        getStartedButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(getStartedButton)

        // TODO: Add constraints here

        // TODO: Add button tap target here
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // TODO: Animate welcomeLabel fade-in here
    }

    // TODO: Add button tap animation method here
}

Solution

iOS Swift

import UIKit

class WelcomeViewController: UIViewController {

    let welcomeLabel = UILabel()
    let getStartedButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Setup welcomeLabel
        welcomeLabel.text = "Welcome!"
        welcomeLabel.font = UIFont.systemFont(ofSize: 32, weight: .bold)
        welcomeLabel.alpha = 0 // Start hidden for fade-in
        welcomeLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(welcomeLabel)

        // Setup getStartedButton
        getStartedButton.setTitle("Get Started", for: .normal)
        getStartedButton.titleLabel?.font = UIFont.systemFont(ofSize: 20, weight: .medium)
        getStartedButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(getStartedButton)

        // Constraints
        NSLayoutConstraint.activate([
            welcomeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            welcomeLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -40),
            getStartedButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            getStartedButton.topAnchor.constraint(equalTo: welcomeLabel.bottomAnchor, constant: 20)
        ])

        // Button tap target
        getStartedButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // Animate welcomeLabel fade-in
        UIView.animate(withDuration: 1.0, animations: {
            self.welcomeLabel.alpha = 1
        }) { _ in
            // Bonus feature: background color fade to soft blue
            UIView.animate(withDuration: 1.0) {
                self.view.backgroundColor = UIColor(red: 0.9, green: 0.95, blue: 1.0, alpha: 1.0)
            }
        }
    }

    @objc func buttonTapped() {
        // Animate button scale up and back
        UIView.animate(withDuration: 0.15, animations: {
            self.getStartedButton.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
        }) { _ in
            UIView.animate(withDuration: 0.15) {
                self.getStartedButton.transform = CGAffineTransform.identity
            }
        }
    }
}

We start with the welcome label hidden by setting its alpha to 0. When the screen appears, we animate its alpha to 1 over one second, making it fade in smoothly. This gentle introduction feels welcoming.

The button is centered below the label. When tapped, it quickly grows bigger and then returns to normal size. This scaling animation gives immediate feedback, making the app feel responsive and polished.

Using UIView.animate keeps the code simple and uses built-in UIKit animations that run smoothly on all iOS devices.

Final Result

Completed Screen

-------------------------
|                       |
|      Welcome!          |
|                       |
|    [ Get Started ]     |
|                       |
-------------------------

When the screen appears, the 'Welcome!' text fades in from invisible to fully visible.

When the user taps the 'Get Started' button, the button quickly grows bigger and then returns to normal size, showing a tap animation.

Stretch Goal

Add a subtle background color fade animation that changes the screen background from white to a soft blue after the welcome text fades in.

💡 Hint

Use UIView.animate with a delay after the welcomeLabel fade-in to change view.backgroundColor smoothly.