Introduction

Animating a height change with Auto Layout is less about moving frames directly and more about letting constraints drive the new layout. The standard pattern is to change the height constraint constant, then animate a call to layoutIfNeeded() on the correct parent view. If you animate the frame instead of the constraint, Auto Layout will usually undo your work on the next layout pass.

Update the Constraint, Then Animate Layout

Suppose you have a panel with a height constraint connected as an outlet. To expand or collapse it, update that constraint and animate the layout pass.

1import UIKit
2
3final class ViewController: UIViewController {
4    @IBOutlet private weak var detailsView: UIView!
5    @IBOutlet private weak var detailsHeightConstraint: NSLayoutConstraint!
6
7    private var isExpanded = false
8
9    @IBAction private func toggleDetails(_ sender: UIButton) {
10        isExpanded.toggle()
11        detailsHeightConstraint.constant = isExpanded ? 220 : 80
12
13        UIView.animate(withDuration: 0.3) {
14            self.view.layoutIfNeeded()
15        }
16    }
17}

The important piece is self.view.layoutIfNeeded() inside the animation block. That tells Auto Layout to interpolate from the old layout to the new one. If you call layoutIfNeeded() before the animation block but not inside it, the change usually jumps instead of animating.

Animate the Right Ancestor View

layoutIfNeeded() should be called on the nearest common ancestor that owns the constraints being updated. In many simple screens, self.view is correct. If the constrained view sits inside a container, stack view, or table header, you may need to animate on that container instead.

Here is the same idea with a dedicated container:

1containerView.layoutIfNeeded()
2
3detailsHeightConstraint.constant = 220
4
5UIView.animate(withDuration: 0.25, delay: 0, options: [.curveEaseInOut]) {
6    containerView.layoutIfNeeded()
7}

Calling it on the wrong view is a common reason animations appear broken or inconsistent.

Working with Intrinsic Content and Hidden Views

Sometimes a fixed height constraint is not the best control point. If the view's size should follow its content, you may be better off activating and deactivating constraints or changing priorities instead of hard-coding one height.

For a simple collapse effect, developers often switch between a normal height and zero:

1detailsHeightConstraint.constant = isExpanded ? 220 : 0
2detailsView.alpha = isExpanded ? 1.0 : 0.0
3
4UIView.animate(withDuration: 0.3) {
5    self.view.layoutIfNeeded()
6}

Combining alpha and layout animation usually feels smoother than a pure height change.

If the view is inside a UIStackView, hiding the arranged subview may be even simpler:

1UIView.animate(withDuration: 0.3) {
2    self.detailsView.isHidden = !self.isExpanded
3    self.view.layoutIfNeeded()
4}

That approach can avoid some constraint bookkeeping, although stack-view behavior should still be tested carefully.

Keep Auto Layout in Control

Avoid direct frame animation like this when constraints define the layout:

detailsView.frame.size.height = 220

It may appear to work for one moment, then snap back because Auto Layout recalculates the frame from constraints. In an Auto Layout screen, the constraint is the source of truth.

For more advanced interactions, you can also use UIViewPropertyAnimator:

1detailsHeightConstraint.constant = 220
2
3let animator = UIViewPropertyAnimator(duration: 0.3, curve: .easeInOut) {
4    self.view.layoutIfNeeded()
5}
6
7animator.startAnimation()

That is useful when you want interruptible or gesture-driven transitions.

Common Pitfalls

The most common mistake is changing the constraint constant but forgetting to animate layoutIfNeeded(). Without that layout pass inside the animation block, the change happens immediately.

Another issue is calling layoutIfNeeded() on the wrong view. If the ancestor does not own the changed constraint, nothing animates properly.

Conflicting constraints can also block the animation. If the height is controlled by multiple required constraints, changing one constant may not have any visible effect. Check the console for Auto Layout warnings and simplify the constraint set.

Finally, do not hide a view by only setting alpha to zero if layout space should collapse too. Alpha affects visibility, not layout size.

Summary

• Change the height constraint constant, not the view frame.
• Call layoutIfNeeded() inside UIView.animate to animate the constraint update.
• Animate on the nearest ancestor that owns the constraint layout.
• Consider zero-height constraints, priority changes, or stack-view hiding for collapsible sections.
• Watch for conflicting constraints when a height change does not animate as expected.