mix
Mix two numbers, colors, or complex values.
mix
can interpolate between two values, based on a 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 Framer Motion.
// Reactimport { mix } from "framer-motion"
// Universalimport { mix } from "framer-motion/dom"
Create a mixer by passing two values of the same type:
const mixer = mix(0, 100)const mixer = mix("#000", "#FFF")const mixer = mix( { a: "0px", b: 10 }, { a: "20px", b: 0 })
Pass the mixer function a 0
-1
progress
to return a mixed value.
const mixer = mix(0, 100)mixer(0.25) // 25
Values outside the 0
-1
range are also accepted.
const mixer = mix(0, 100)mixer(2) // 200mixer(-1) // -100