Carnation is now in early alpha. Read more

Docs
animate

animate

🚧

This page is under construction.

import { c, animate, m, useMotionValue } from "carnation-ds";
 
function Component() {
  const translateX = useMotionValue(0);
 
  return (
    <c.div>
      <m.div style={{ translateX }} />
 
      <c.button
        onPress={() => {
          animate(translateX, Math.random() * 100, {
            type: "timing",
            ease: "easeInOut",
            duration: 2,
          });
        }}
      >
        <c.span>Move</c.span>
      </c.button>
    </c.div>
  );
}