Animating colors

Colors are animated like any other property, and you can use any of the different CSS notations. The colors you will see during the transition depend on the ‘color model’ you picked.

Color models

A color model is like a map. When moving from one color to another, Framer has to know which colors are in between the ‘from’ and ‘to’ colors. Do we take the RGB color model, or do we follow the Hue, Saturation, Lightness model, where the hues are placed next to each other like in a rainbow?

RGB is not always optimal. When you animate from blue to yellow, for example, the color in the middle will be… gray. (See the example project on the next page.)

The HSL model is generally better. The transition will follow the hue scale (much like the hue rotation filter), so the in-between colors will have consistent saturation. But there’s another problem: some of those colors might be lighter.

That’s why Framer uses HUSL. This ‘human-friendly HSL’ model takes into account how we perceive the lightness of colors and will, for instance, make yellow appear darker when animating from red to green.

HUSL is the default colorModel, but you can change it to RGB or HSL.

# Animate using the (default) HUSL color model
blueCircle1.animate
    backgroundColor: "Red"

# Animate using the RGB color model
blueCircle2.animate
    backgroundColor: "Red"
    options:
        colorModel: "rgb"

# Animate using the HSL color model
blueCircle3.animate
    backgroundColor: "Red"
    options:
        colorModel: "hsl"

If you want to learn more about the difference between these three color models and their effect on transitions, this article by Riley Shaw offers a great explanation.