Comprehensive Animation Feature Sandboxes

Multi-axis 3D spatial rotation (rotateX, rotateY) with authentic spring overshoot math.

StudioMotion.animate({
  targets: '#card',
  rotateX: [30, 0],
  rotateY: [-40, 0],
  scale: [0.85, 1],
  duration: 750,
  easing: 'spring'
});

Orchestrates complex multi-waypoint trajectories seamlessly inside a single tween configuration.

StudioMotion.animate({
  targets: '#card',
  keyframes: [
    { translateY: -35, scale: 1.15, rotate: -8 },
    { translateX: 30, rotate: 8 },
    { translateY: 0, translateX: 0, scale: 1, rotate: 0 }
  ],
  duration: 1100,
  easing: 'easeOutBack'
});

Orchestrates grid ripple waves radiating from center, first, last, or randomized positions.

StudioMotion.animate({
  targets: '.matrix-box',
  scale: [0, 1],
  rotate: [-45, 0],
  stagger: StudioMotion.stagger(40, { from: 'center' }),
  duration: 550,
  easing: 'easeOutBack'
});

Interpolates pure JavaScript data objects with decimal precision rounding and live rendering.

const state = { score: 0 };
StudioMotion.animate({
  targets: state,
  score: 100,
  round: 1,
  duration: 1200,
  easing: 'easeOutCubic',
  onUpdate: () => {
    el.textContent = state.score + '%';
  }
});

Pointer-tracked kinetic dragging with momentum throw, bounds, and spring snapback.

StudioMotion.draggable('#draggableCard', {
  inertia: true,
  snap: 25,
  onDragEnd: (x, y) => console.log('Landed at:', x, y)
});

Auto-measures path lengths and smoothly draws stroke dash offsets with physics easing.

StudioMotion.svg.createDrawable('#svgCheck', {
  duration: 650,
  easing: 'easeOutCubic'
});

Splits headings into individual glyph spans with automated stagger & 3D rotation.

const chars = StudioMotion.text.splitChars('#headline');
StudioMotion.animate({
  targets: chars,
  translateY: [40, 0],
  rotate: [-20, 0],
  stagger: 35,
  duration: 600,
  easing: 'spring'
});

Incrementally animates properties from their current offset using math operators.

StudioMotion.animate({
  targets: '#card',
  translateX: '+=40px',
  duration: 400,
  easing: 'spring'
});

Automatically calculates First-Last-Invert-Play coordinates for smooth grid reordering.

StudioMotion.layout('#cardGrid', () => {
  // DOM element reorder
  shuffleChildren(grid);
}, { duration: 600, easing: 'spring' });

Interpolates 3D Mesh positions, scales, and rotation Euler angles with spring physics.

StudioMotion.adapters.three(mesh.rotation, {
  y: Math.PI * 2,
  duration: 1200,
  easing: 'spring'
});

Animates arbitrary CSS custom variables directly to drive reactive design systems.

StudioMotion.animate({
  targets: '#card',
  '--glow-size': ['10px', '35px'],
  direction: 'alternate',
  duration: 600,
  easing: 'easeInOutQuad'
});

Chains multi-element steps with custom labels and relative time offsets (+=100, -=200).

const tl = StudioMotion.timeline();
tl.add({ targets: '#step1', scale: [0.5, 1.2, 1], duration: 300 })
  .add({ targets: '#step2', scale: [0.5, 1.2, 1], duration: 300 }, '+=80')
  .add({ targets: '#step3', scale: [0.5, 1.2, 1], duration: 300 }, '+=80');
tl.play();

Radial 2D matrix wave propagation radiating outward from the epicenter cell.

StudioMotion.animate({
  targets: '#grid .m-cell',
  scale: [0.3, 1.35, 1],
  rotate: [-90, 0],
  stagger: StudioMotion.stagger(45, { from: 'center' }),
  duration: 650,
  easing: 'spring'
});

Progressive character unscrambling matrix effect inspired by Anime.js 4.5 text engine.

StudioMotion.text.scramble('#headline', 'STUDIOMOTION // 2026', {
  duration: 1200,
  easing: 'easeOutCubic'
});

Smooth mathematical coordinate interpolation between arbitrary vector shapes.

StudioMotion.svg.morphTo('#star', '#circle', {
  duration: 900,
  easing: 'easeInOutCubic'
});

Compound particle velocities that seamlessly stack momentum on repeated triggers.

StudioMotion.animate({
  targets: '.swarm-dot',
  translateX: () => (Math.random() - 0.5) * 160,
  translateY: () => (Math.random() - 0.5) * 120,
  scale: [0.5, 1.4, 1],
  duration: 800,
  easing: 'spring'
});

Interactive cursor pull with harmonic spring dampening as you hover over the stage.

stage.addEventListener('pointermove', (e) => {
  StudioMotion.animate({
    targets: '#card',
    translateX: (e.offsetX - w/2) * 0.4,
    translateY: (e.offsetY - h/2) * 0.4,
    duration: 350,
    easing: 'spring'
  });
});

Smooth horizontal dragging with kinetic inertia and threshold bounds.

StudioMotion.draggable('#carousel', {
  inertia: true,
  bounds: { minX: -150, maxX: 150 }
});