mix can create a function that will mix between two values, based on a 0-1 progress value.

const mixer = mix(0, 100)
mixer(0.5) // 50

mix is capable of mixing between many different value types:

• Numbers

• Colors (RGBA, HSLA)

• Complex strings

• Arrays and objects of the above

Additionally, RGB color mixing is performed using the linear RGB color space, ensuring colors are mixed without the typical CSS brightness dips/greyness.

Usage

Import from Motion:

import { mix } from "motion"

Create a mixer by passing two values of the same type:

const mixNumber = mix(0, 100)
const mixColor = mix("#000", "#FFF")
const mixObject = mix(
  { a: "0px", b: 10 },
  { a: "20px", b: 0 }
)

Pass the mixer function a 0-1 progress to return a mixed value.

const mixComplex = mix("0px 0px #fff", "100px 100px #000")

mixComplex(0.5) // 50px 50px rgba(128, 128, 128, 1)

Values outside the 0-1 range are also accepted.

const mixNumber = mix(0, 100)

mixNumber(2) // 200
mixNumber(-1) // -100

Easing

You can apply easing to the mixed value by passing progress through an easing function:

import { mix, easeInOut } from "motion"

const mixNumber = mix(0, 100)

mixNumber(easeInOut(0.75))