CODEWITHSUNDEEP
animationswiftuiscrollviewlazyhstack
lorenzo gonzalez
lorenzo gonzalez

Reputation: 1984

Weird animation bug inside scrollview with lazyhstack

I have a ForEach of itemView() inside a lazyHStack which is inside a Scrollview,

In the itemView, I have a a tap gesture that adds an item to an array and then runs a checkIfSelected() func, which compares if the item is selected, if so, you see a checkmark and changes the background of the view and adds an outline as you can see.

The other part is the %Discount Badge as you can see for some items, that are in discount, the problem is as you can see the discount badge is kinda flying around when scrolling and then sets where it goes. im using .transition and .animation, this doesn't happen of course with the checkmark as its always there and just the .opacity is changed to 0, but as im using .transition(.move(.top) ) on the discount badge, it animates correctly accordingly when the checkmark appears you see it coming from the top down and viceversa when the checkmark is not present.

I have tried different approaches but no luck.

VStack(spacing:5) {
    LinearGradient.defaultOrangeRedGradient
        .mask(Image(systemName: "checkmark.circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
        ).background( Circle().fill(Color.white).frame(width:20,height:20))
        .opacity(isSelected ? 1 : 0)
        .frame(width: 20, height: 20)
        .zIndex(4)

    
      
   
    
   if( item.isOffer) {
        VStack {
        Image( colorScheme == .dark ? item.isOfferIconDark : item.isOfferIcon)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width:20,height:20)
            .opacity(item.isOffer ? 1 : 0)
            //.transition(.opacity)
        }.transition(.move(edge: .top))
                .animation(.easeInOut(duration: 0.2))
                .zIndex(2)
        }
}

enter image description here

Upvotes: 3

Views: 500

Answers (1)

Brandon Erbschloe
Brandon Erbschloe

Reputation: 418

Try embedding your content in View.geometryGroup().

Isolates the geometry (e.g. position and size) of the view from its parent view.

Example:

VStack {
    ....
}
.geometryGroup()

See https://stackoverflow.com/a/79062620/4777830 for a similar question & answer.

Upvotes: 1

Related Questions