# How SwiftUI's .animation Modifier Applies Animations in the View Tree

DevFeed: [How SwiftUI's .animation Modifier Applies Animations in the View Tree](<https://devfeed.tech/articles/when-animation-animates-more-or-less-than-it-s-supposed-to-21709.md>)

Original publisher: [Read original article](<https://oleb.net/2022/animation-modifier-position/>)

Author: Ole Begemann

Published: 2022-11-10T21:48:45Z

Content type: tutorial

Language: en

Sources: [Ole Begemann](<https://devfeed.tech/sources/ole-begemann.md>)

Topics: [SwiftUI](<https://devfeed.tech/topics/swiftui.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [macOS](<https://devfeed.tech/topics/macos.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [ios](<https://devfeed.tech/tags/ios.md>), [macos](<https://devfeed.tech/tags/macos.md>), [snippet](<https://devfeed.tech/tags/snippet.md>), [swiftui](<https://devfeed.tech/tags/swiftui.md>)

## AI overview

This article examines how SwiftUI's .animation modifier behaves within the view tree. It explains that sibling subtrees can use different animations, nested modifiers can override outer animations, and the modifier generally affects subviews with some exceptions.

## Source excerpt

On the positioning of the .animation modifier in the view tree, or: "Rendering" vs. "non-rendering" view modifiers The documentation for SwiftUI's animation modifier says: Applies the given animation to this view when the specified value changes. This sounds unambiguous to me: it sets the animation for "this view", i.e. the part of the view tree that .animation is being applied to. This should give us complete control over which modifiers we want to animate, right? Unfortunately, it's not that simple: it's easy to run into situations where a view change inside an animated subtree doesn't get animated, or vice versa. Unsurprising examples Let me give you some examples, starting with those that do work as documented. I tested all examples on iOS 16.1 and macOS 13.0. 1. Sibling views can have different animations Independent subtrees of the view tree can be animated independently. In this example we have three sibling views, two of which are animated with different durations, and one that isn't animated at all: struct Example1: View { var flag: Bool var body: some View { HStack(spacing: 40) { Rectangle() .frame(width: 80, height: 80) .foregroundColor(.green) .scaleEffect(flag ? 1 : 1.5) .animation(.easeOut(duration: 0.5), value: flag) Rectangle() .frame(width: 80, height: 80) .foregroundColor(flag ? .yellow : .red) .rotationEffect(flag ? .zero : .degrees(45)) .animation(.easeOut(duration: 2.0), value: flag) Rectangle() .frame(width: 80, height: 80) .foregroundColor(flag ? .pink : .mint) } } } The two animation modifiers each apply to their own subtree. They don't interfere with each other and have no effect on the rest of the view hierarchy: Download video 2. Nested animation modifiers When two animation modifiers are nested in a single view tree such that one is an indirect parent of the other, the inner modifier can override the outer animation for its subviews. The outer animation applies to view modifiers that are placed between the two animation modifiers. In this