Skip to content

Confetti Animation Staggers When Bursted During a Push Animation #33

@emrepun

Description

@emrepun

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):

confetti_delay.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions