Log inGet Started

Translate

Move elements along X and Y axes with pixel or percentage values.

Translate moves elements along the X, Y, and Z axes. Properties x and y default to pixels; use xPercent and yPercent for responsive percentage-based movement that scales with element size.

Basic Translate

Pass x or y inside from or to. Numbers are treated as pixels by default.

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

Motion("slide", ".box", {
  from: { x: -100 },
  duration: 0.6,
  ease: "power2.out",
}).play();

Properties

PropertyTypeDefaultDescription
xnumber0Horizontal offset in pixels
ynumber0Vertical offset in pixels
znumber0Depth offset in pixels (3D)
xPercentnumber0Horizontal offset as % of element width
yPercentnumber0Vertical offset as % of element height

Percentage Values

xPercent and yPercent move an element relative to its own dimensions. A value of -100 slides the element completely off-screen in its own width or height — ideal for full-bleed panel transitions.

typescript 
Motion("responsive-slide", ".panel", {
  from: { yPercent: -100 },
  duration: 0.8,
  ease: "power3.out",
}).onPageLoad();

From-Only Pattern for Reveals

The most common translate pattern: start offset, animate to the natural position. The SDK reads the element’s current CSS (x: 0, y: 0) as the to endpoint automatically — no need to declare it.

typescript 
Motion("reveal", ".card", {
  from: { y: 100, opacity: 0 },
  duration: 0.6,
  ease: "power2.out",
}).onScroll({ scrub: false, toggleActions: "play none none none" });

Combining X and Y — Diagonal Movement

Set both x and y simultaneously to animate along a diagonal path.

typescript 
Motion("diagonal", ".element", {
  from: { x: -80, y: 60, opacity: 0 },
  duration: 0.7,
  ease: "power2.out",
}).onScroll({ scrub: false, toggleActions: "play none none none" });

px vs % — When to Use Each

Pixels (x, y) — Fixed distance. Predictable across all screen sizes. Best for small UI shifts like hover lifts and nudges.

Percent (xPercent, yPercent) — Relative to element dimensions. Responsive. Best for full-width slides and off-screen entrances.

Common Patterns

Slide Up Reveal

typescript 
Motion("slide-up", ".section", {
  from: { y: 40, opacity: 0 },
  duration: 0.6,
  ease: "power2.out",
}).onScroll({ scrub: false, toggleActions: "play none none none" });

Horizontal Scroll

typescript 
const sections = Motion.utils.toArray(".panel");

Motion("h-scroll", ".track", {
  to: { xPercent: -100 * (sections.length - 1) },
  duration: 1,
}).onScroll({
  scrub: true,
  pin: true,
  end: `+=${sections.length * 100}%`,
});

Parallax Offset

Drive y with scroll scrub to produce a parallax effect. The element moves at a different speed than the page scroll.

typescript 
Motion("parallax", ".bg-layer", {
  from: { y: -50 },
  to: { y: 50 },
  duration: 1,
}).onScroll({ scrub: true });

Z-Axis Translation (3D Depth)

z moves elements along the depth axis — toward or away from the viewer. It requires a parent element with a perspective CSS property to produce a visible 3D effect.

typescript 
Motion("depth", ".card", {
  from: { z: -200, opacity: 0 },
  duration: 0.8,
  ease: "power2.out",
}).play();

Set perspective: 800px (or similar) on the parent container:

css 
.container {
  perspective: 800px;
}

For more on combining translate with rotations and 3D, see the 3D Transforms page.

  • Opacity — fade combined with translate for polished reveals
  • Scale — zoom effects often paired with translate
  • 3D Transforms — rotateX, rotateY, and perspective
  • Transform Origin — control the anchor point for all transforms