How to Build Animations with Swift iOS - Step by Step

Step-by-step iOS animation tutorial using UIViewPropertyAnimator, card flips, and staggered lists in mobile development.

Published: March 10, 2026

Category: Tech & Development

Introduction Building animations in Swift might seem intimidating at first, but Apple has designed its animation APIs to be approachable and powerful. This step-by-step tutorial from GSoft Technologies guides you through building three real-world animation patterns using Swift and UIKit for professional iOS and mobile development projects. What Is UIViewPropertyAnimator? UIViewPropertyAnimator, introduced in iOS 10, is the modern way to build interactive, interruptible animations in Swift. Unlike the older UIView.animate block-based API, UIViewPropertyAnimator gives you a handle to the running animation so you can pause it, reverse it, scrub it with a gesture, or add new animation blocks mid-flight. Key Features / Why Use UIViewPropertyAnimator Interruptible: The user can grab a mid-flight animation with a gesture. Reversible: Call isReversed = true to play the animation backwards. Custom timing: Use UISpringTimingParameters for precise easing control. Additive animations: Multiple animators can affect the same view property. State machine: Track animation state (.inactive, .active, .stopped). Step-by-Step: Animation Tutorial 1 - Animated Card Flip import UIKitclass FlipCardViewController: UIViewController { @IBOutlet weak var frontView: UIView! @IBOutlet weak var backView: UIView! private var isFaceUp = true @IBAction func flipCard(_ sender: UIButton) { let fromView = isFaceUp ? frontView : backView let toView = isFaceUp ? backView : frontView let direction: UIView.AnimationOptions = isFaceUp ? .transitionFlipFromRight : .transitionFlipFromLeft UIView.transition(from: fromView!, to: toView!, duration: 0.4, options: [direction, .showHideTransitionViews], completion: nil) isFaceUp.toggle() }} Step-by-Step: Animation Tutorial 2 - Gesture-Driven Dismiss class BottomSheetViewController: UIViewController { private var animator: UIViewPropertyAnimator? override func viewDidLoad() { super.viewDidLoad() let pan = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:))) view.addGestureRecognizer(pan) } @objc private func handlePan(_ gesture: UIPanGestureRecognizer) { let translation = gesture.translation(in: view.superview) let velocity = gesture.velocity(in: view.superview) switch gesture.state { case .began: animator = UIViewPropertyAnimator(duration: 0.4, dampingRatio: 0.85) { self.view.transform = CGAffineTransform(translationX: 0, y: 400) self.view.alpha = 0.5 } animator?.pauseAnimation() case .changed: animator?.fractionComplete = max(0, min(1, translation.y / 400)) case .ended: let shouldDismiss = velocity.y > 500 || (animator?.fractionComplete ?? 0) > 0.5 animator?.isReversed = !shouldDismiss animator?.continueAnimation(withTimingParameters: nil, durationFactor: 0.3) if shouldDismiss { animator?.addCompletion { _ in self.dismiss(animated: false) } } default: break } }} Step-by-Step: Animation Tutorial 3 - Staggered List Entrance extension MyTableViewController: UITableViewDelegate { func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { let delay = Double(indexPath.row) * 0.05 cell.alpha = 0 cell.transform = CGAffineTransform(translationX: 0, y: 20) UIView.animate(withDuration: 0.4, delay: delay, options: [.curveEaseOut], animations: { cell.alpha = 1 cell.transform = .identity }) }} Best Practices Separate animation logic into dedicated methods to keep view controllers clean. Never block the main thread inside animation blocks. Use layoutIfNeeded() inside animation blocks for constraint-based layouts. Match iOS platform animation direction conventions for navigation. Real-World Use Cases at GSoft Technologies GSoft Technologies has applied these patterns in production iOS apps for e-commerce, healthcare, and fintech. The gesture-driven bottom sheet is a staple in our mobile development toolkit. These techniques work alongside our Flutter and React Native cross-platform work. Conclusion Building animations in Swift step by step reveals a clear progression

Back to Blog | Home | Services | Contact Us