Animating gradients

This works as you would expect.

In this example, I animate the start and end colors of those three child layers, all at the same time.

layer_A.onTap ->
    gradient_1.animate
        gradient:
            start: color_4_red
            end: color_1_purple
    gradient_2.animate
        gradient:
            start: color_1_purple
            end: color_2_lightblue
    gradient_3.animate
        gradient:
            start: color_2_lightblue
            end: color_3_yellow

As you’ve seen in the background color example, you can also animate angle. (There’s another example in one of the Text Layers projects.)

Remember that, just like when animating multiple shadows, you have to ‘reach into’ the gradient’s properties with an extra indented line.

Lines like these, for instance, will not work.

gradient_1.animate
    gradient.start: color_4_red
gradient_1.gradient.animate
    start: color_4_red

And, also comparable to how it works with multiple shadows, you can pass in an existing gradient (a prepared Gradient object, or another layer’s gradient).

# A gradient object
aGradient = new Gradient
    start: "yellow"
    end: "orange"
    angle: 90
# Animating to the gradient
layerA.animate
    gradient: aGradient

Easy gradient animations with Design

Like this:

importantAndVisibleLayer.animate
    gradient: layerThatJustHoldsTheGradient.gradient