Colors

Animate background color, text color, and border color.

Color animation lets you transition any color property — background, text, border, or SVG — between any two CSS color values. The SDK handles the interpolation, so you can mix formats freely across from and to.

Basic Usage

Use backgroundColor, color, or borderColor inside from or to. Provide only the endpoint that differs from the element’s natural CSS state.

import { Motion } from "@motion.page/sdk";

Motion("highlight", ".card", {
  from: { backgroundColor: "#1a1a2e" },
  to: { backgroundColor: "#6633EE" },
  duration: 0.6,
}).play();

Because neither value matches the element’s natural CSS here, both from and to are specified explicitly. When animating to a color that matches the element’s existing CSS, omit to and let the SDK resolve it automatically.

Color Properties

Note: borderColor is not listed as a first-class AnimationVars property but works seamlessly at runtime through the SDK’s CSS property support. Use it the same way as backgroundColor.

Supported Color Formats

The SDK interpolates between any combination of these formats — no conversion needed on your end.

Common Patterns

Theme Transition

Swap background and text color simultaneously for a dark-to-light effect.

Motion("theme", ".section", {
  from: { backgroundColor: "#0f0f0f", color: "#ffffff" },
  to: { backgroundColor: "#ffffff", color: "#0f0f0f" },
  duration: 0.5,
  ease: "power2.inOut",
}).onScroll({ scrub: true });

Both properties animate in parallel — the background lightens as the text darkens.

Hover Color Change

Use .onHover() with each: true so each element responds to its own hover independently.

Motion("btn-color", ".btn", {
  to: { backgroundColor: "#6633EE", color: "#ffffff" },
  duration: 0.25,
  ease: "power2.out",
}).onHover({ each: true, onLeave: "reverse" });

onLeave: "reverse" plays the animation backwards on mouse out, returning each button to its original CSS color without needing a from value.

Color Cycling with Repeat

Cycle infinitely between colors using yoyo to reverse the animation on each pass.

Motion("pulse-color", ".badge", {
  from: { backgroundColor: "#6633EE" },
  to: { backgroundColor: "#FF6B6B" },
  duration: 1,
  ease: "power1.inOut",
  repeat: { times: -1, yoyo: true },
}).onPageLoad();

SVG Colors

Use fill and stroke to animate colors on SVG elements. These properties target the SVG paint attributes directly, separate from the CSS color and background.

Motion("icon-fill", "svg path", {
  from: { fill: "#999999" },
  to: { fill: "#6633EE" },
  duration: 0.4,
}).onHover({ each: true, onLeave: "reverse" });

You can animate both together — for example, changing fill while also revealing a stroke outline:

Motion("icon-active", "svg path", {
  to: { fill: "#6633EE", stroke: "#ffffff" },
  duration: 0.3,
  ease: "power2.out",
}).onClick({ each: true });

Tips

• The SDK interpolates between any combination of color formats — you can go from a hex from to an hsl() to without issues.
• Animate multiple color properties simultaneously by including them all in the same from/to object.
• Use from-only when animating to the element’s natural CSS color — the SDK reads the existing value and uses it as the endpoint automatically.
• To animate color and transparency together, use rgba() or hsla() strings rather than animating opacity separately — this avoids affecting child element visibility.

See also: Opacity for transparency effects, and SVG for drawing and path animations on SVG elements.