Framer Classic » Gradients » Animating gradients

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
Open in Framer
Animating three gradients at the same time

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

Tip: Create a second layer in Design with the gradient you want to animate to, then simply animate to that layer’s gradient.

Like this:

importantAndVisibleLayer.animate
    gradient: layerThatJustHoldsTheGradient.gradient

Leave a Reply