SwiftUI - The animation is cropped by the frame

[ct-shabnaz]

lottieanimation.mov

I have a bunch of views in a horizontal ScrollView - how do we stop the animation being cropped by the frame of each view?

        LottieView(animation: .named("add-to-faves-button", bundle: .module))
            .playbackMode(playbackMode)
            .animationDidFinish { _ in
                playbackMode = pause
            }

    private var favouriteButton: some View {
        WishlistButton(isFavourited: product.isFavourite)
            .onTapGesture {
                handleFave()
            }
            .position(favouriteButtonPosition)
            .edgesIgnoringSafeArea(.all)
    }
    
    private var favouriteButtonPosition: CGPoint {
        let padding: CGFloat = 20
        let horizontalPosition = width - padding
        let verticalPosition = padding
        return CGPoint(x: horizontalPosition, y: verticalPosition)
    }

Is there a way to set a separate frame for the animation? I've also had to use .position because if I set a frame it constraints the size of the animation.

[calda]

You could try setting maskAnimationToBounds = false on the underlying LottieAnimationView with a configure closure. You'll also need to make sure none of the SwiftUI superviews are clipping the Lottie view.

I'm not sure off the top of my head if LottieView properly supports maskAnimationToBounds = false. If you test that and find that it doesn't work, even in a sample project that only renders a single LottieView, please file an issue.

[ct-shabnaz]

Hi @calda ! Thanks for your response :)

maskAnimationToBounds didn't do anything but after some investigation - the issue is the ScrollView. SwiftUI has added scrollClipDisabled() but it's only available on iOS 17 🫠 The other options are playing around with balancing paddings on the scrollview and containerView (eg using negative paddings) or there is also SwiftUI-Introspect library which could be used for older versions to access the UIScrollView in SwiftUI.

Another quirk I noticed with HStack is you have to set the zIndex manually otherwise the next card will cut off the animation too - so I had to set the first card to be highest zIndex and then descend along the carousel.

Hopefully this post helps anyone who faces a similar issue.

[calda]

Thank you for sharing!