mcut
@mcut/timeline

Animation presets

Preset names, easings, and the expansion of presets into keyframes.

Types

AnimationPreset

type AnimationPreset = z.infer<typeof animationPresetSchema>

An animation preset name as inferred from animationPresetSchema.

AnimationPresetOptions

type AnimationPresetOptions = z.infer<typeof animationPresetOptionsSchema>

Preset options as inferred from animationPresetOptionsSchema.

Schemas

animationPresetOptionsSchema

const animationPresetOptionsSchema = z.object({
  durationMs: z.number().int().min(50).optional(),
  direction: z.enum(['up', 'down', 'left', 'right']).optional(),
  intensity: z.number().min(0.1).max(4).optional(),
})

Zod schema for preset options, a duration of at least 50 ms, a direction, and an intensity from 0.1 to 4.

animationPresetSchema

const animationPresetSchema = z.enum([
  'fade-in',
  'slide-in',
  'pop-in',
  'scale-in',
  'zoom-in',
  'whip-in',
  'blur-in',
  'fade-out',
  'slide-out',
  'pop-out',
  'zoom-out',
  'whip-out',
  'blur-out',
  'ken-burns',
  'punch-zoom',
  'pulse',
  'breathe',
  'float',
  'sway',
  'shake',
])

Zod schema for the twenty preset names, seven entrances, six exits, and seven combined or looping motions.

Constants

ANIMATION_PRESET_CATEGORIES

const ANIMATION_PRESET_CATEGORIES: Record<'in' | 'out' | 'combo', AnimationPreset[]>

The preset names grouped into in, out, and combo.

ANIMATION_PRESET_DEFAULT_DURATION_MS

const ANIMATION_PRESET_DEFAULT_DURATION_MS: Record<AnimationPreset, number>

The default duration of each preset in milliseconds.

EASINGS

const EASINGS = {
  outExpo: { cubicBezier: [0.16, 1, 0.3, 1] },
  outQuint: { cubicBezier: [0.22, 1, 0.36, 1] },
  outCubic: { cubicBezier: [0.33, 1, 0.68, 1] },
  outBack: { cubicBezier: [0.34, 1.56, 0.64, 1] },
  inCubic: { cubicBezier: [0.32, 0, 0.67, 0] },
  inQuart: { cubicBezier: [0.5, 0, 0.75, 0] },
  inExpo: { cubicBezier: [0.7, 0, 0.84, 0] },
  inBack: { cubicBezier: [0.36, 0, 0.66, -0.56] },
  inOutCubic: { cubicBezier: [0.65, 0, 0.35, 1] },
  inOutSine: { cubicBezier: [0.37, 0, 0.63, 1] },
  emphasizedAccelerate: { cubicBezier: [0.3, 0, 0.8, 0.15] },
} satisfies Record<string, Easing>

Named cubic bezier easings shared by the presets, from outExpo to emphasizedAccelerate.

MOTION_BLUR_PRESETS

const MOTION_BLUR_PRESETS: ReadonlySet<AnimationPreset>

The presets that turn on motion blur when applied, whip-in, whip-out, and punch-zoom.

Functions

expandAnimationPreset

function expandAnimationPreset(
  element: TimelineElement,
  preset: AnimationPreset,
  options: AnimationPresetOptions = {},
): KeyframeMap

Returns the element's keyframe map with the preset's keyframes merged in, using the default duration, direction, and intensity unless options override them.

On this page