Vortex icon indicating copy to clipboard operation
Vortex copied to clipboard

Confetti Animation Staggers When Bursted During a Push Animation

Open emrepun opened this issue 11 months ago • 0 comments

I don't know if this is known, but there is a bit of a lag when confetti animation is triggered onAppear and view is being pushed onto navigation stack. Please see the recording at the end for reference.

Code:

struct PushedContentView: View {
    var body: some View {
        ZStack {
            VortexViewReader { proxy in
                VortexView(.confetti.makeUniqueCopy()) {
                    Rectangle()
                        .fill(.white)
                        .frame(width: 16, height: 16)
                        .tag("square")
                    
                    Circle()
                        .fill(.white)
                        .frame(width: 16)
                        .tag("circle")
                }
                .padding(.top, -384.0)
                .onAppear {
                    proxy.burst()
                }
            }
            ScrollView {
                // Redacted: Actual content of the view
            }
        }
    }
}

Additional details (might be useful): The navigation is handled by a UINavigationController, so view above is embedded in a UIHostingController and pushed to the stack with UIKit.

As a workaround I added a 0.5 seconds of delay before triggering the burst, which fixes the issue

Recording (The lag seems even worse in recording, but o simulator or device it is not that bad):

https://github.com/user-attachments/assets/505b1657-1a4a-4c2f-9220-fb3f133f4ca8

emrepun avatar Feb 21 '25 12:02 emrepun