Migrating to 1.0

Version 1.0 makes the attributes consistent across all 40 components. Most changes are renames. A few change the unit, so the number changes too. The table below lists every change and how to convert it.

Upgrading from 1.0 or 1.1? Read the first section: since 1.2.0, every CSS custom property starts with --mc-.

CSS custom properties start with --mc-

Since version 1.2.0, every CSS custom property starts with --mc-. The names without the prefix no longer work. Add mc- after the two dashes and keep the rest of the name:

motion-icon {
  --mc-icon-color: #2563eb; /* was --icon-color */
}

motion-chart {
  --mc-chart-1: #e11d48; /* was --chart-1 */
}

This search lists the old names in your code. It also finds your own variables with the same names, so review each match:

grep -rnE -- '--(color-|icon-|chart-|sparkline-|code-|countdown-|dialog-|progress|spotlight-|theme-)' src

Install

npm install motion-components@^1.0.0

The rules in 1.0

Every change

Code token colors

motion-code token colors move from --cw-* to --mc-code-*. Replace the prefix and keep the rest of the name:

motion-code {
  --mc-code-keyword: #c678dd; /* was --cw-keyword */
  --mc-code-string: #98c379;  /* was --cw-string */
}

New in 1.0

• motion-press and motion-magnetic have a bounce attribute. motion-tilt has duration and bounce.
• motion-theme-toggle has icon-only for the toggle appearance.
• Registering a component twice no longer throws. Two bundles can include the same component.
• Importing the library during server-side rendering no longer throws, so it works in Next.js, Astro and similar frameworks.
• once="false" replays the animation every time the element scrolls into view.
• Text components escape their text. Markup inside the text is shown as text and never runs as HTML.
• Screen readers read the whole text once in motion-arc, motion-circle, motion-curve, motion-gravity and motion-perspective, instead of letter by letter.
• With reduced motion, motion-split and motion-headline show their text at once.

Find old attributes in your code

This search lists most of the attributes that changed. Review each match with the table above.

grep -rnE 'speed=|stiffness=|damping=|stagger-duration=|type-speed=|type-delay=|type-loop-delay=|no-loop|smoothing=|fade-duration=|slidechange|--cw-|trigger="(auto|reveal)"' src