Home / Guides / Offset animation

A SwiftUI offset animation

Benjamin Peralta · October 2, 2026

A SwiftUI offset animation places a view after layout. Give offset an x and a y from the clock, and the dot travels without a stack arranging it.

A sketch of the motion. The file below plays on the phone, and the same source pastes into Xcode.

The file

import SwiftUI

struct DriftDot: View {
    var body: some View {
        TimelineView(.animation) { context in
            let t = context.date.timeIntervalSinceReferenceDate
            Circle()
                .fill(.mint)
                .frame(width: 22, height: 22)
                .offset(x: cos(t * 2) * 36, y: sin(t * 1.3) * 16)
        }
        .frame(width: 120, height: 80)
    }
}

cos(t * 2) and sin(t * 1.3) are two waves that do not share a period, so the path does not close into a tidy circle. Multiply by 36 and 16 and you have points. offset(x:y:) applies them. The frame around the timeline gives the dot a region to wander in. Without it, the offset still moves the circle, and the circle can leave the space you meant for it.

Offset, not a stack

An HStack or VStack is for arranging children against each other. A dot on a path is not arranged against anything. Offset is the modifier that says where it is. The loading animation uses the same call, twice, with opposite angles. Rotation uses the clock for an angle instead of a point.

Keep going

• Loading animationTwo offsets, one orbit.
• Rotation animationThe clock, as degrees.
• onAppearOne offset, once.
• SwiftUI animationThe whole set.

Get Swoop

iPhone. iOS 17 and later. The file plays on the phone.