morphMorph
Create continuous transformation between before and after layouts of a shared element.
Preview
Interpolated geometry reshapes one visual form into another across a continuous transition.
FullReduced
FullReduced
Preview
Implement Morph: Create continuous transformation between before and after layouts of a shared element. Use Duration 260ms, Continuity mode morph, Distance 48px, Start scale 86%, Easing soft. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--morph, and mount the provided vanilla JavaScript interaction runtime. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.
<div class="motion-demo motion-demo--morph" data-motion="morph" aria-label="Morph demo">
<div class="motion-replay-scene">
<article class="motion-surface">
<strong>Morph</strong>
<span class="motion-line"></span>
<span class="motion-line"></span>
</article>
<div class="motion-action-row"><button class="motion-replay-button" type="button" data-motion-replay>Replay motion</button></div>
</div>
</div>.motion-demo.motion-demo--morph {
box-sizing: border-box;
position: relative;
display: grid;
place-items: center;
width: min(100%, 34rem);
min-height: 15rem;
padding: 2rem;
overflow: hidden;
color: #18181b;
background: #fafafa;
border: 1px solid #e4e4e7;
border-radius: 16px;
isolation: isolate;
}
.motion-demo.motion-demo--morph *, .motion-demo.motion-demo--morph *::before, .motion-demo.motion-demo--morph *::after {
box-sizing: border-box;
}
.motion-demo.motion-demo--morph .motion-surface {
position: relative;
display: grid;
gap: 0.65rem;
width: min(100%, 18rem);
padding: 1.25rem;
background: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 16px;
box-shadow: none;
}
.motion-demo.motion-demo--morph .motion-surface strong { font-weight: 500; }
.motion-demo.motion-demo--morph .motion-line {
display: block;
width: 100%;
height: 0.5rem;
background: #e4e4e7;
border-radius: 999px;
}
.motion-demo.motion-demo--morph .motion-line:last-child { width: 62%; }
.motion-demo.motion-demo--morph .motion-button {
position: relative;
min-height: 2.75rem;
padding: 0.75rem 1.1rem;
color: white;
font: inherit;
font-weight: 700;
background: #18181b;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.motion-demo.motion-demo--morph .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }
.motion-demo.motion-demo--morph .motion-action-row {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.85rem;
}
.motion-demo.motion-demo--morph .motion-replay-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--morph .motion-pausable-scene {
width: min(100%, 22rem);
display: grid;
place-items: center;
}
.motion-demo.motion-demo--morph button.motion-surface {
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.motion-demo.motion-demo--morph .motion-replay-button,
.motion-demo.motion-demo--morph .motion-undo-button,
.motion-demo.motion-demo--morph .motion-dismiss-button,
.motion-demo.motion-demo--morph .motion-pause-button {
min-height: 2.75rem;
padding: 0.65rem 0.9rem;
color: #18181b;
font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
background: #ffffff;
border: 1px solid #d4d4d8;
border-radius: 8px;
cursor: pointer;
}
.motion-demo.motion-demo--morph .motion-replay-button:focus-visible,
.motion-demo.motion-demo--morph .motion-undo-button:focus-visible,
.motion-demo.motion-demo--morph .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--morph .motion-pause-button:focus-visible,
.motion-demo.motion-demo--morph [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--morph [data-swipe-target]:focus-visible {
outline: 3px solid rgb(37 99 235 / 32%);
outline-offset: 3px;
}
.motion-demo.motion-demo--morph .motion-status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.motion-demo.motion-demo--morph .motion-ripple-ink {
position: absolute;
width: 12px;
height: 12px;
pointer-events: none;
background: rgb(255 255 255 / 72%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.95);
opacity: 0;
}
.motion-demo.motion-demo--morph .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--morph .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; }
.motion-demo.motion-demo--morph .motion-state--to { background: #18181b; color: white; }
.motion-demo.motion-demo--morph .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--morph .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--morph .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--morph svg { width: min(100%, 20rem); height: auto; }
.motion-demo.motion-demo--morph .motion-surface { width: min(100%, 18rem); transform-origin: center; animation: motion-morph 260ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes motion-morph { from { opacity: 0.65; transform: translateX(-17px) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes motion-morph-reduced-fade {
from { opacity: 0.84; }
to { opacity: 1; }
}
.force-reduced-motion .motion-demo.motion-demo--morph {
animation: motion-morph-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.force-reduced-motion .motion-demo.motion-demo--morph *,
.force-reduced-motion .motion-demo.motion-demo--morph *::before,
.force-reduced-motion .motion-demo.motion-demo--morph *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.force-reduced-motion .motion-demo.motion-demo--morph .motion-button,
.force-reduced-motion .motion-demo.motion-demo--morph [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--morph [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--morph [data-spring-target] {
transform: none !important;
}
.force-reduced-motion .motion-demo.motion-demo--morph .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--morph .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--morph .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.motion-demo.motion-demo--morph {
animation: motion-morph-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.motion-demo.motion-demo--morph *, .motion-demo.motion-demo--morph *::before, .motion-demo.motion-demo--morph *::after {
animation: none !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity, color, background-color, border-color !important;
transition-duration: 160ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.motion-demo.motion-demo--morph .motion-button,
.motion-demo.motion-demo--morph [data-reorder-item],
.motion-demo.motion-demo--morph [data-swipe-target],
.motion-demo.motion-demo--morph [data-spring-target] {
transform: none !important;
}
.motion-demo.motion-demo--morph .motion-path { stroke-dashoffset: 0 !important; }
.motion-demo.motion-demo--morph .motion-word--from { opacity: 0 !important; visibility: hidden; }
.motion-demo.motion-demo--morph .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}(() => {
const config = {
"id": "morph",
"duration": 260,
"distance": 48,
"resistance": 65,
"position": 50,
"stiffness": 220,
"damping": 24,
"mass": 1,
"velocity": 0,
"rippleSize": 220,
"rippleOpacity": 24,
"dragScale": 86,
"autoplay": false
};
const mount = (root, config) => {
const cleanups = [];
const addCleanup = (callback) => cleanups.push(callback);
const cleanup = () => {
for (let index = cleanups.length - 1; index >= 0; index -= 1) {
try { cleanups[index](); } catch { /* keep cleanup reentrant */ }
}
cleanups.length = 0;
};
const on = (target, type, listener, options) => {
target.addEventListener(type, listener, options);
addCleanup(() => target.removeEventListener(type, listener, options));
};
const reduced = () => root.closest(".force-reduced-motion") !== null ||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const watchReduced = (callback) => {
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
const notify = () => callback(reduced());
media.addEventListener("change", notify);
const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(notify);
let ancestor = root;
while (observer && ancestor) {
observer.observe(ancestor, { attributes: true, attributeFilter: ["class"] });
ancestor = ancestor.parentElement;
}
addCleanup(() => {
media.removeEventListener("change", notify);
if (observer) observer.disconnect();
});
};
const replay = root.querySelector("[data-motion-replay]");
if (!replay) return cleanup;
const restart = () => {
root.getAnimations({ subtree: true }).forEach((animation) => {
animation.cancel();
animation.currentTime = 0;
animation.play();
});
};
addCleanup(() => root.getAnimations({ subtree: true }).forEach((animation) => {
if (animation.playState === "paused") animation.play();
}));
on(replay, "click", restart);
return cleanup;
};
document.querySelectorAll("[data-motion=\"morph\"]").forEach((root) => {
const cleanupKey = "__motionLexiconCleanup";
if (typeof root[cleanupKey] === "function") root[cleanupKey]();
root[cleanupKey] = mount(root, config);
});
})();Learn more
Terms and distinctions
morphMorph
形变English definition
Interpolated geometry reshapes one visual form into another across a continuous transition.
Chinese translation
一个形状平滑地变成另一个形状，例如灵动岛。
continuity-transitionContinuity transition
连续性过渡English definition
A transition preserves recognizable geometry or position across states so viewers can follow the change.
Chinese translation
通过视觉连接变化前后的状态来帮助用户保持方位感，例如让同一个矩形放大或缩小。
Distinction
Continuity transition is a principle for preserving before-and-after relationships; Morph is one technique that can create continuity.
shared-element-transitionShared element transition
共享元素过渡English definition
A persistent visual object changes position, size, or styling while connecting two layouts.
Chinese translation
同一个元素从一个位置移动并变换到另一个位置，例如缩略图展开成卡片。
Distinction
Shared element transition moves and transforms the same element across layouts; Morph emphasizes one shape becoming another.
layout-animationLayout animation
布局动画English definition
Changes in measured position or dimensions are animated between layout snapshots.
Chinese translation
元素尺寸或位置变化时，以动画移动到新状态，而非瞬间跳变。
Distinction
Layout animation smooths size or position changes; Morph changes an element's shape.
Before implementation
- Purpose
- Turn one shape smoothly into another while preserving object identity.
- Frequency
- Reserve for low-frequency brand marks, icons, and high-value state changes; keep common controls subtler.
- Trigger
- Trigger when the object's state genuinely changes, with understandable correspondence between shapes.
- Enter / exit
- Use one geometric object and interpolation path across states, normalizing path points when needed.
- Interruptibility
- Retarget from the current interpolated shape instead of returning to an endpoint.
- Gesture and keyboard
- Map gesture-driven morph progress continuously to input, with keyboard toggles for discrete controls.
- Reduced-motion strategy
- Use a static state replacement or short crossfade while preserving object position and size.
Accessibility
Reduced motion
Use a static state replacement or short crossfade while preserving object position and size.
Parameter reference
| Parameter | Range / options | Default | Purpose |
|---|---|---|---|
duration | 80ms–1200ms | 260ms | Controls the time required for one motion cycle. |
mode | Shape morph / Continuity transition / Shared element / Layout change | Shape morph | Selects how continuity is preserved between states. |
distance | 0px–120px | 48px | Controls how far the element travels. |
scale | 70%–105% | 86% | Controls the starting size relative to the final state. |
ease | Soft / Snap / Calm / Linear | Soft | Controls how velocity changes over time. |
Pre-delivery review
- Distinguish morphing from shared-element and layout transitions.
- Check intermediate shapes for self-intersection or flicker.