Value Providers Not Working Correctly with SwiftUI LottieView

[mshll]

Bug Description

When using value providers (specifically GradientValueProvider) with the native SwiftUI LottieView, gradients are not rendered correctly. The same code works perfectly fine with UIKit's LottieAnimationView.

Environment

• Lottie Version: 4.5.2
• iOS Version: 26.0 & 18.2
• Xcode Version: 26.1.1

Expected Behavior

Gradient colors should be applied to the animation using GradientValueProvider, matching the behavior in UIKit.

Actual Behavior

1. When gradient has fewer colors than the original animation (e.g., 2 colors when animation expects 3), the gradient renders as solid black
2. When gradient color count matches the animation (e.g., 3 colors), only the first color renders as a solid color across the entire gradient
3. Both issues only occur in SwiftUI, not in UIKit

Code to Reproduce

SwiftUI (NOT working):

import SwiftUI
import Lottie

struct SecondView: View {
    var body: some View {
        VStack(spacing: 20) {
            LottieView(animation: .named("19633-voice-video-switch"))
                .configure { view in
                    applyAnimationChanges(to: view)
                    view.logHierarchyKeypaths()
                }
                .playing(loopMode: .loop)
                .frame(maxWidth: .infinity, maxHeight: 400)
        }
    }
    
    private func applyAnimationChanges(to animationView: LottieAnimationView) {
        let color1 = LottieColor(r: 0/255, g: 80/255, b: 115/255, a: 1)
        let color2 = LottieColor(r: 113/255, g: 199/255, b: 236/255, a: 1)
        
        // This doesn't work in SwiftUI but works in UIKit
        let gradientValueProvider = GradientValueProvider([color1, color2])
        let gradientKeyPath = AnimationKeypath(keypath: "**.**.**.Colors")
        animationView.setValueProvider(gradientValueProvider, keypath: gradientKeyPath)
        
        let colorValueProvider = ColorValueProvider(color1)
        let footKeyPath = AnimationKeypath(keypath: "Foot.Rectangle 1.Stroke 1.Color")
        animationView.setValueProvider(colorValueProvider, keypath: footKeyPath)
    }
}

UIKit (Working correctly):

import UIKit
import Lottie

class SecondViewController: UIViewController {
    @IBOutlet weak var animationView: LottieAnimationView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let animation = LottieAnimation.named("19633-voice-video-switch")
        animationView.animation = animation
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        
        applyAnimationChange()
        animationView.logHierarchyKeypaths()
        animationView.play()
    }
    
    private func applyAnimationChange() {
        let color1 = LottieColor(r: 0/255, g: 80/255, b: 115/255, a: 1)
        let color2 = LottieColor(r: 113/255, g: 199/255, b: 236/255, a: 1)
        
        // This works perfectly in UIKit
        let gradientValueProvider = GradientValueProvider([color1, color2])
        let gradientKeyPath = AnimationKeypath(keypath: "**.**.**.Colors")
        animationView.setValueProvider(gradientValueProvider, keypath: gradientKeyPath)
        
        let colorValueProvider = ColorValueProvider(color1)
        let footKeyPath = AnimationKeypath(keypath: "Foot.Rectangle 1.Stroke 1.Color")
        animationView.setValueProvider(colorValueProvider, keypath: footKeyPath)
    }
}

Additional Notes

The .configure modifier seems to execute at the right time (the closure is called), but value providers don't apply correctly. This appears to be a timing or initialization issue specific to the SwiftUI implementation.

Is there a recommended way to use value providers with the native SwiftUI LottieView?

[calda]

Have you tried using the LottieView.valueProvider(...) API instead?

https://github.com/airbnb/lottie-ios/blob/master/Sources/Public/Animation/LottieView.swift#L372

[mshll]

@calda I have, sadly same result, still the first color renders as a solid color

    var body: some View {
        let color1 = LottieColor(r: (0/255), g: (80/255), b: (115/255), a: 1)
        let color2 = LottieColor(r: (113/255), g: (199/255), b: (236/255), a: 1)
        let gradientValueProvider = GradientValueProvider([color1, color2, color2])
        
        VStack(spacing: 20) {
            LottieView(animation: .named("19633-voice-video-switch"))
                .valueProvider(gradientValueProvider, for: "**.**.**.Colors")
                .playing(loopMode: .loop)
                .frame(maxWidth: .infinity, maxHeight: 400)
            
        }
    }

[calda]

Please share a copy of an animation json that demonstrates this issue

[mshll]

I have tried several animations, but here's one of them, the same from the code examples above.

19633-voice-video-switch.json

[calda]

It works correctly when I use the SwiftUI APIs and the Main Thread rendering engine:

let color1 = LottieColor(r: 1, g: 0, b: 0, a: 1)
let color2 = LottieColor(r: 0, g: 1, b: 0, a: 1)
let gradientValueProvider = GradientValueProvider([color1, color2, color2])

// ...
.valueProvider(gradientValueProvider, for: "**.Colors")
.configuration(LottieConfiguration(renderingEngine: .mainThread))

[mshll]

it seems to be working on the Main Thread engine, thanks I haven't tried that.

[dinozaurus0]

Hey everyone 👋

I had a quick look over the issue and got a question for you @mshll . I tried to reproduce the problem, and it reproduces with a caveat. You mention above that for UIKit works just fine, issues arise when using SwiftUI. I looked over the SwiftUI setup for gradient & color. They seem pretty similar (for simple color it works, gradient doesn't). Now the twist is that I used your example from UIKit + CoreAnimation renderer and that doesn't work for gradient either. I have the following example:

import UIKit
import Lottie

final class GradientViewController: UIViewController {
    private var animationView: LottieAnimationView!

    override func viewDidLoad() {
        super.viewDidLoad()

        animationView = .init(
            name: "bug4",
            configuration: LottieConfiguration(renderingEngine: .coreAnimation)
        )

        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop

        applyAnimationChange()
        animationView.logHierarchyKeypaths()
        animationView.play()

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        setConstraints()
    }

    private func setConstraints() {
        NSLayoutConstraint.activate([
            animationView.topAnchor.constraint(equalTo: view.topAnchor),
            animationView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            animationView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            animationView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }

    private func applyAnimationChange() {
        let color1 = LottieColor(r: 1, g: 0, b: 0, a: 1)
        let color2 = LottieColor(r: 0, g: 1, b: 0, a: 1)

        let gradientValueProvider = GradientValueProvider([color1, color2])
        let gradientKeyPath = AnimationKeypath(keypath: "**.**.**.Colors")
        animationView.setValueProvider(gradientValueProvider, keypath: gradientKeyPath)

        let colorValueProvider = ColorValueProvider(color1)
        let footKeyPath = AnimationKeypath(keypath: "Foot.Rectangle 1.Stroke 1.Color")
        animationView.setValueProvider(colorValueProvider, keypath: footKeyPath)
    }
}

Can you please double check if UIKit works with CoreAnimation renderer? Or if I have made any mistake in the above example, please point it out 🙏 . The reason I’m asking is that if it doesn’t work for you with UIKit + CoreAnimation either, then the issue is not in the conversion layer but rather deeper inside the Core Animation renderer.

[dinozaurus0]

Hey everyone 👋

I’ve investigated this issue and identified the cause. This behavior isn’t due to the Lottie library itself, but rather how CoreAnimation handles gradients.

Internally, Lottie uses CAGradientLayer to render gradients. There’s a particular issue with this layer: you define the gradient colors using the colors property. If you assign an array with three values to colors and then try to apply an animation with two colors to the same gradient layer, the animation is ignored. I’ll share a sample example demonstrating this behavior.

As a side note, if you define 2 colours initially and then add an animation with 3 colours it works just fine 😕 (If anyone has insights into why it behaves this way, please share them—I’d be happy to continue investigation for this issue. Thank you! @calda).

final class GradientMaskedViewController: UIViewController {

    let gradientLayer = CAGradientLayer()

    override func viewDidLoad() {
        super.viewDidLoad()

        gradientLayer.frame = CGRect(x: 50, y: 150, width: 200, height: 200)
        gradientLayer.colors = [
            UIColor.black.cgColor,
            UIColor.white.cgColor,
            UIColor.red.cgColor
        ]

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = UIBezierPath(ovalIn: gradientLayer.bounds).cgPath
        shapeLayer.fillColor = UIColor.black.cgColor
        gradientLayer.mask = shapeLayer

        view.layer.addSublayer(gradientLayer)
        
        animateToGreen()
    }

    func animateToGreen() {
        let color1 = UIColor(
            red: 0.0,
            green: 0.4,
            blue: 0.0,
            alpha: 0.5
        ).cgColor

        let color2 = UIColor(
            red: 0.0,
            green: 0.7,
            blue: 0.2,
            alpha: 0.75
        ).cgColor
        
        let newColors = [color1, color2]

        let animation = CABasicAnimation(keyPath: "colors")
        animation.fromValue = gradientLayer.colors
        animation.toValue = newColors
        animation.duration = 1.5
        animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)


        gradientLayer.add(animation, forKey: "colorChange")
    }
}

This isn’t specific to SwiftUI. I’ve tested the same scenario on multiple simulators across different iOS versions and even with different Lottie files containing gradients. The behavior is consistent in both SwiftUI and UIKit.

If you want to change the gradient later using the setValueProvider method, make sure the number of colors you provide matches or exceeds the number of colors defined in the Lottie file. If you do this, the issue is resolved regardless of which renderer you use.

Lastly, the reason the color appears black when you provide fewer colors than in the Lottie file is due to internal behavior of the library. When the animation is added via the value provider, initial color is black. If CoreAnimation ignores the animation, these default black value will persist. If not, the animation overrides the black color and all looks good.

[calda]

Interrsting!

I wonder if we could work around the issue by automatically padding the colors with extra placeholder values if the count doesn't match the count from the animation itself