Custom Transforms / Value Transforms needs clear documentation
chidexebere opened this issue · comments
Chidiebere Onyegbuchulem commented
The documentation for Custom Transforms / Value Transforms is not clear.
I am trying to create a custom transform to HSL colors.
/*
{
CUSTOM_EASING: {
type: 'easing',
value: [1,2,3,4]
}
}
*/
theo.registerValueTransform(
// Name to be used with registerTransform()
"easing/web",
// Determine if the value transform
// should be run on the specified prop
prop => prop.get("type") === "easing",
// Return the new value
prop => {
const [x1, y1, x2, y2] = prop.get("value").toArray();
return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
}
);
// Override the default "web" transform
theo.registerTransform("web", ["color/rgb", "easing/web"]);