I am trying to achieve to play lottie file on index based when the card is visible scroll/move it only plays specific lottie file animation not for all other cards. I am using Snapcarousel and passing CardView.

Right now lottie files plays animation on all cards. How can i retrieve to use it? I try to use @Binding but not worked.

MainCode:

VStack(alignment: .leading) {
            SnapCarouselView(
                itemsPadding: 12,
                trailingSpaces: 20 * 5,
                index: $viewModel.selectedIndex,
                list: viewModel.cardProductList,
                showIndicator: true,
                contentView: { cards in
                    CardView(viewModel: PurchaseViewModel(productID: cardProductList.Id, name: cardProductList.name, description: cardProductList.description, subTitle: cardProductList.subTitle))
                }
            )
        }

CardView code:

Here I want to pass index so lottie file plays animation on specific visible card

struct CardView: View {
    @StateObject var viewModel: PurchaseViewModel
    
    // MARK: - Constants
    private struct ViewConstants {
        static let screenWidth = UIScreen.main.bounds.width
        static let cardWidth = screenWidth - 100
        static let cardRatio = 300.0/377.0
        static let cardHeight = cardWidth/cardRatio + 10
    }
    
    var body: some View {
        ZStack {
            VStack(spacing: 8) {
                LottieView(filename: "Animation", animationType: .loop)
                    .frame(height: ViewConstants.cardHeight / 2)
                
                VStack {
                    Text("CARD SHOPPING")
                        .lineLimit(1)
                        .padding(.bottom, 2)
                    
                    Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")
                        .lineLimit(3)
                        .padding(.horizontal, 24)
                }
                
                Button("Press Me") {
                    print("Button pressed!")
                }
                .padding(.top, 4)
                .padding(.bottom, 24)
                
            }
            .frame(width: ViewConstants.cardWidth, height: ViewConstants.cardHeight)
            .multilineTextAlignment(.center)
            .background(viewModel.bgColor)
            .cornerRadius(12)
        }
        .padding(.leading, -20 * 3)
    }
}

Image:
Gif Image of Carousel