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 = {},
): KeyframeMapReturns the element's keyframe map with the preset's keyframes merged in, using the default duration, direction, and intensity unless options override them.