Skew

Distort elements with skewX and skewY shear transforms.

Skew applies a shear mapping (transvection) that distorts each point within an element by a certain angle — tilting the shape without rotating it. Use skewX for horizontal distortion and skewY for vertical distortion. Both properties accept degrees.

Parameters

Property	Type	Default	Description
`skewX`	`number`	`0`	Horizontal shear angle in degrees. Positive values tilt the top-right, negative values tilt the top-left.
`skewY`	`number`	`0`	Vertical shear angle in degrees. Positive values tilt the bottom-left, negative values tilt the bottom-right.

Because skewX: 0 and skewY: 0 are natural CSS defaults, you can omit to when animating back to the element’s un-skewed state — the SDK resolves the missing endpoint automatically.

Basic Usage

typescript

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

// Animate from skewed to natural (un-skewed) state
Motion("card-in", ".card", {
  from: { skewX: 15, opacity: 0 },
  duration: 0.6,
  ease: "power3.out",
}).onPageLoad();

typescript

// Skew on hover, reverse on leave
Motion("tilt", ".button", {
  to: { skewX: -8 },
  duration: 0.3,
  ease: "power2.out",
}).onHover({ each: true, onLeave: "reverse" });

Common Patterns

Skew Slide Entrance

Combine skewX with x (translate) for a dynamic entrance that feels like elements are rushing in from the side.

typescript

Motion("slide-in", ".card", {
  from: { x: -40, skewX: 20, opacity: 0 },
  duration: 0.55,
  ease: "power3.out",
  stagger: 0.1,
}).onPageLoad();

The skew diminishes as the element settles into place, giving it a sense of momentum and deceleration.

Italic Text Effect

Skew the characters of a heading for a bold, editorial style — a clean alternative to CSS font-style: italic on non-italic typefaces.

typescript

Motion("italic-in", "h1", {
  split: "words",
  from: { skewX: -12, opacity: 0 },
  duration: 0.5,
  ease: "power2.out",
  stagger: 0.07,
}).onPageLoad();

Hover Distortion

Add a subtle skew on hover to make interactive elements feel dynamic and tactile.

typescript

Motion("hover-skew", ".nav-link", {
  to: { skewX: -6 },
  duration: 0.25,
  ease: "power2.out",
}).onHover({ each: true, onLeave: "reverse" });

Combined Skew Axes

Use skewX and skewY together for a perspective-like warp effect.

typescript

Motion("warp", ".panel", {
  from: { skewX: 10, skewY: 4, opacity: 0 },
  duration: 0.7,
  ease: "expo.out",
}).onScroll({ scrub: false, toggleActions: "play none none none" });

Dynamic Distortion on Scroll (Scrub)

Drive skew with scroll progress for a parallax-distortion effect.

typescript

Motion("scroll-skew", ".hero-title", {
  from: { skewX: 0 },
  to: { skewX: 12 },
  duration: 1,
}).onScroll({ scrub: true });

Combining Skew with Translate

Skew and translate pair naturally because a shear transform shifts the visual center of mass. Offsetting with x compensates for that shift and keeps the entrance feeling grounded.

typescript

// The x offset counters the visual displacement caused by skew
Motion("sweep", ".feature", {
  from: { x: -60, skewX: 25, opacity: 0 },
  duration: 0.6,
  ease: "power3.out",
  stagger: { each: 0.08, from: "start" },
}).onScroll({ scrub: false, toggleActions: "play none none none" });

See Translate for x, y, and z offset options.

Notes

Skew values are in degrees. There are no units to specify — skewX: 15 means 15 degrees.
Large skew angles (above ~30°) can make elements illegible. Keep values subtle (5–20°) for most UI use cases.
skewX: 0 and skewY: 0 are natural CSS defaults — do not include them in a to block when animating from a skewed state back to normal. The SDK resolves them automatically.
Skew affects the element’s visual bounding box, which can cause it to overflow its container. Use overflow: hidden on the parent or pair with a clip-path when needed.