Transition effects in iOS Swift

Introduction

Transition effects make moving between screens smooth and nice to look at. They help users understand changes in the app.

When switching from one screen to another in an app.

When showing or hiding a view with animation.

When you want to make the app feel more lively and friendly.

When guiding users through steps or tasks visually.

When replacing content without confusing the user.

Syntax

iOS Swift

let transition = CATransition()
transition.duration = 0.5
transition.type = CATransitionType.fade
view.window?.layer.add(transition, forKey: kCATransition)
navigationController?.popViewController(animated: false)

Use CATransition to create custom animations between views.

Set animated: false in navigation methods to use your custom transition.

Examples

This example pushes a new screen from the right with a smooth slide effect.

iOS Swift

let transition = CATransition()
transition.duration = 0.3
transition.type = .push
transition.subtype = .fromRight
view.window?.layer.add(transition, forKey: kCATransition)
navigationController?.pushViewController(nextVC, animated: false)

This example fades out the current screen when going back.

iOS Swift

let transition = CATransition()
transition.duration = 0.4
transition.type = .fade
view.window?.layer.add(transition, forKey: kCATransition)
navigationController?.popViewController(animated: false)

Sample App

This app has two screens. Pressing the button on the first screen slides in the second screen from the right. Pressing the button on the second screen reveals the first screen from the left. The transitions make the changes smooth and clear.

iOS Swift

import UIKit
import QuartzCore

class FirstViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        let button = UIButton(type: .system)
        button.setTitle("Go to Second", for: .normal)
        button.addTarget(self, action: #selector(goToSecond), for: .touchUpInside)
        button.frame = CGRect(x: 100, y: 200, width: 150, height: 50)
        view.addSubview(button)
    }

    @objc func goToSecond() {
        let secondVC = SecondViewController()
        let transition = CATransition()
        transition.duration = 0.5
        transition.type = .moveIn
        transition.subtype = .fromRight
        view.window?.layer.add(transition, forKey: kCATransition)
        navigationController?.pushViewController(secondVC, animated: false)
    }
}

class SecondViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .lightGray
        let button = UIButton(type: .system)
        button.setTitle("Go Back", for: .normal)
        button.addTarget(self, action: #selector(goBack), for: .touchUpInside)
        button.frame = CGRect(x: 100, y: 200, width: 150, height: 50)
        view.addSubview(button)
    }

    @objc func goBack() {
        let transition = CATransition()
        transition.duration = 0.5
        transition.type = .reveal
        transition.subtype = .fromLeft
        view.window?.layer.add(transition, forKey: kCATransition)
        navigationController?.popViewController(animated: false)
    }
}

Important Notes

Always set animated: false when using custom transitions with navigation controllers.

You can change transition.type to fade, push, moveIn, or reveal for different effects.

Transition duration controls how fast or slow the animation plays.

Summary

Transition effects make screen changes smooth and easy to follow.

Use CATransition to customize animations between views.

Remember to disable default animation when adding your own transition.