# Motion.page Documentation

> Visual animation builder and SDK for the web.

- [Animation Presets](https://motion.page/docs/sdk/animation-presets): Full catalog of built-in presets — Entrances, Loops, Text Reveals, Smooth Transitions, Creative Effects.
- [Translate](https://motion.page/docs/sdk/translate): Move elements along X and Y axes with pixel or percentage values.
- [Breakpoints](https://motion.page/docs/sdk/breakpoints): Configure responsive breakpoints and per-breakpoint animation behavior.
- [Duration & Delay](https://motion.page/docs/sdk/duration-delay): Control animation timing with duration in seconds and delay before start.
- [Presentation Mode](https://motion.page/docs/sdk/presentation-mode): Build a gesture-driven section deck with the public SDK and understand the Builder-generated presentation output.
- [Advanced Targeting](https://motion.page/docs/sdk/advanced-targeting): Target specific pages with post types, custom RegEx URL patterns, and selector strategies.
- [Transform Origin](https://motion.page/docs/sdk/transform-origin): Set the origin point for scale, rotation, and transform animations.
- [Stagger](https://motion.page/docs/sdk/stagger): Animate multiple targets in sequence with configurable delay, direction, and grid patterns.
- [SPA Integration](https://motion.page/docs/sdk/spa-integration): Use the SDK with React, Vue, Next.js, and Astro — cleanup, page transitions, lifecycle.
- [ScrollTrigger Advanced](https://motion.page/docs/sdk/scroll-trigger-advanced): Pin elements, add spacing, configure snap points, and use scroll markers for debugging.
- [Debugging Animations](https://motion.page/docs/sdk/debugging): Debug with markers, console logging, timeline inspection, and common pitfalls.
- [What is Motion.page SDK](https://motion.page/docs/sdk/overview): Overview of the SDK — a standalone animation engine with named timelines, triggers, and zero dependencies.
- [3D Transforms](https://motion.page/docs/sdk/3d-transforms): Rotate elements in 3D space with rotateX, rotateY, rotateZ and perspective.
- [Dimensions](https://motion.page/docs/sdk/dimensions): Animate width and height of elements.
- [Triggers](https://motion.page/docs/sdk/triggers): Control when and how animations play with built-in trigger types.
- [Skew](https://motion.page/docs/sdk/skew): Distort elements with skewX and skewY shear transforms.
- [Fit Animation](https://motion.page/docs/sdk/fit-animation): Morph one element's position and size to match another using FLIP-style animations.
- [Rotation](https://motion.page/docs/sdk/rotation): Rotate elements in 2D with degree values.
- [CSS Filters](https://motion.page/docs/sdk/filters): Apply animated blur, grayscale, brightness, contrast, and other CSS filter effects.
- [Multi-Step Sequencing](https://motion.page/docs/sdk/sequencing): Build complex timelines with multiple steps and the position parameter.
- [Colors](https://motion.page/docs/sdk/colors): Animate background color, text color, and border color.
- [Clip Path](https://motion.page/docs/sdk/clip-path): Reveal and mask elements with animated CSS clip-path.
- [Motion Path](https://motion.page/docs/sdk/motion-path): Animate elements along SVG paths with auto-rotation and alignment.
- [Repeat & Yoyo](https://motion.page/docs/sdk/repeat-yoyo): Loop animations with repeat count and yoyo back-and-forth playback.
- [Mouse Movement](https://motion.page/docs/sdk/mouse-movement): Animate based on cursor position with axis and distance modes.
- [Page Exit](https://motion.page/docs/sdk/page-exit): Animate elements before navigating away from the page.
- [Lottie Integration](https://motion.page/docs/sdk/lottie): Sync Lottie Player frames with Motion.page timeline progress.
- [Observer & Gesture](https://motion.page/docs/sdk/observer-gesture): Respond to pointer, touch, wheel, and scroll gestures with 21 callback events.
- [Scale](https://motion.page/docs/sdk/scale): Scale elements uniformly or independently on X/Y axes.
- [Image Sequence](https://motion.page/docs/sdk/image-sequence): Drive frame-by-frame canvas sequences with Motion.page timeline progress.
- [Opacity](https://motion.page/docs/sdk/opacity): Fade elements in and out with opacity animations.
- [Static Methods](https://motion.page/docs/sdk/static-methods): Motion.set(), Motion.kill(), Motion.killAll(), Motion.reset(), Motion.refreshScrollTriggers().
- [SVG Animations](https://motion.page/docs/sdk/svg): Draw SVG strokes with DrawSVG and animate stroke and fill colors.
- [Custom Cursor](https://motion.page/docs/sdk/custom-cursor): Create custom cursor effects with presets, multiple instances, and state-based styling.
- [Text Splitter](https://motion.page/docs/sdk/split-text): Split text into characters, words, or lines and animate them individually with stagger.
- [Custom CSS Properties](https://motion.page/docs/sdk/custom-properties): Animate any CSS property using custom key-value pairs and the advanced code field.
- [Getting Started](https://motion.page/docs/sdk/getting-started): Install the SDK, create your first animation, and understand the basic pattern.
- [Responsive Animations](https://motion.page/docs/sdk/responsive): Create animations that adapt to different screen sizes with Motion.responsive and breakpoints.
- [Performance & Best Practices](https://motion.page/docs/sdk/performance): Optimize animation performance — will-change, hardware acceleration, batch operations.
- [Hover Trigger](https://motion.page/docs/sdk/hover): Play animations on mouse enter with reverse or restart on leave.
- [Motion() Factory](https://motion.page/docs/sdk/motion-factory): Complete reference for the Motion() function — retrieve, create, and configure timelines.
- [Timeline Control](https://motion.page/docs/sdk/timeline-control): Play, pause, reverse, seek, and inspect timeline state programmatically.
- [Easing Functions](https://motion.page/docs/sdk/easing): All easing curves — power, sine, expo, circ, back, elastic, bounce — with visual reference.
- [Scroll Trigger](https://motion.page/docs/sdk/scroll-trigger): Trigger or scrub animations based on scroll position with start, end, and toggleActions.
- [Text Flapper](https://motion.page/docs/sdk/text-flapper): Solari split-flap display effect with cycling characters and configurable transition types.
- [Page Load Trigger](https://motion.page/docs/sdk/page-load): Auto-play animations when the page loads or DOM is ready.
- [Utility Functions](https://motion.page/docs/sdk/utilities): Motion.utils helpers — toArray, clamp, random, snap, interpolate, mapRange.
- [Click Trigger](https://motion.page/docs/sdk/click): Play animations on click with toggle support for reverse and restart.
- [Core Concepts](https://motion.page/docs/sdk/core-concepts): Named timelines, from/to resolution, implicit values, and how the SDK works internally.
- [Timeline Editor](https://motion.page/docs/builder/timeline-editor): Visual timeline — nodes, duration, sequencing, drag-to-resize, and playhead controls.
- [Fit Animation](https://motion.page/docs/builder/fit): Morph one element's position and size to match another element on the page.
- [Animation Presets](https://motion.page/docs/builder/animation-presets): Browse, preview, and apply built-in animation presets.
- [Translate](https://motion.page/docs/builder/translate): Move elements with the translate controls — X, Y, units.
- [Breakpoint Sizes](https://motion.page/docs/builder/breakpoints): Set the pixel thresholds that define each device tier across the builder.
- [Repeat & Yoyo](https://motion.page/docs/builder/repeat): Loop animations with repeat count, infinite looping, and yoyo.
- [Duration & Delay](https://motion.page/docs/builder/duration-delay): Control animation timing by setting duration and delay for animation nodes in the timeline.
- [WordPress Integration](https://motion.page/docs/builder/wordpress-integration): Admin menu, page selection, global timelines, authentication, and WordPress-specific settings.
- [Lenis Smooth Scroll](https://motion.page/docs/builder/lenis-smooth-scroll): Enable and configure Lenis smooth scrolling — duration, multipliers, easing, and per-page exclusions.
- [Hover Trigger](https://motion.page/docs/builder/hover-trigger): Configure hover animations with single and multi-target modes, and control what happens on mouse leave.
- [Presentation Mode](https://motion.page/docs/builder/presentation-mode): Configure full-page section scrolling with smooth transitions, direction control, and visual effects.
- [Advanced Targeting](https://motion.page/docs/builder/advanced-targeting): Target animations to specific pages using post types, custom URLs, and RegEx patterns.
- [Animation Library](https://motion.page/docs/builder/library): Save, organize, enable/disable, and manage your animation library.
- [Transform Origin](https://motion.page/docs/builder/transform-origin): Set the origin point for transform animations in the builder UI.
- [Stagger](https://motion.page/docs/builder/stagger): Configure stagger for multiple-target animations.
- [What is the Builder](https://motion.page/docs/builder/overview): Overview of the Motion.page visual animation builder — available as a WordPress plugin and Desktop app.
- [3D Transforms](https://motion.page/docs/builder/3d-transforms): Apply 3D perspective transforms to elements in the builder.
- [From, To & Set](https://motion.page/docs/builder/from-to-set): Understand the three animation modes and how to switch between them.
- [Dimensions](https://motion.page/docs/builder/dimensions): Animate width and height of elements in the builder.
- [Skew](https://motion.page/docs/builder/skew): Apply skew distortion to elements on the 2D plane.
- [Desktop App Overview](https://motion.page/docs/builder/desktop-overview): Features of the standalone desktop application.
- [Background Position](https://motion.page/docs/builder/background-position): Animate background position for parallax and sliding background effects in the builder.
- [CDN & SDK Bundles](https://motion.page/docs/builder/cdn-delivery): Publish animations via CDN and manage custom SDK bundles.
- [Rotation](https://motion.page/docs/builder/rotation): Rotate elements on X, Y, and Z axes with the builder rotation controls.
- [Workspace Overview](https://motion.page/docs/builder/workspace-overview): Tour of the builder interface — panels, preview, timeline, and navigation.
- [Motion Path](https://motion.page/docs/builder/motion-path): Animate elements along SVG paths with align, auto-rotate, and range controls.
- [Mouse Movement](https://motion.page/docs/builder/mouse-movement): Animate elements based on cursor position with axis and distance modes, scoped selectors, and smooth transitions.
- [Page Exit](https://motion.page/docs/builder/page-exit): Run animations when the user navigates away from the page using the Page Exit trigger.
- [Lottie Animations](https://motion.page/docs/builder/lottie): Sync Lottie Player animations with your Motion.page timeline.
- [Observer / Gesture](https://motion.page/docs/builder/observer-gesture): Detect pointer, touch, wheel, and scroll gestures to drive animations with configurable axes, tolerance, and presentation mode.
- [Background Color](https://motion.page/docs/builder/background-color): Animate background colors between any two values in the builder.
- [Scale](https://motion.page/docs/builder/scale): Scale elements with uniform or independent X/Y controls.
- [Image Sequence](https://motion.page/docs/builder/image-sequence): Play frame-by-frame image sequences on a canvas element synced to your timeline.
- [Opacity](https://motion.page/docs/builder/opacity): Configure opacity animations in the builder UI.
- [Animate SVG](https://motion.page/docs/builder/svg): Animate SVG elements with DrawSVG, stroke color, and fill color in the builder.
- [Custom Cursor](https://motion.page/docs/builder/custom-cursor): Create custom cursor effects with smooth movement, state-based styling, hover targets, and multiple cursor instances.
- [Responsive Editing](https://motion.page/docs/builder/responsive-editing): Tune a single timeline per device with cascading overrides — no duplicate timelines required.
- [Text Splitter](https://motion.page/docs/builder/split-text): Split text into chars, words, or lines for per-element animation.
- [Custom Properties](https://motion.page/docs/builder/custom-properties): Animate any CSS property using the Custom Properties panel in the builder.
- [Getting Started](https://motion.page/docs/builder/getting-started): Step-by-step guide to creating your first animation in the Motion.page Builder.
- [Left Panel](https://motion.page/docs/builder/left-panel): Animation configuration — tabs, From/To/Set, selectors, folders, and trigger section.
- [Selecting Elements](https://motion.page/docs/builder/element-selection): Choose animation targets — click-to-select, CSS selectors, multiple selectors.
- [Text Color](https://motion.page/docs/builder/text-color): Animate font and text colors between any two values in the builder.
- [Timeline Control](https://motion.page/docs/builder/timeline-control): Control other timelines from within a timeline — play, pause, reverse, restart.
- [Easing](https://motion.page/docs/builder/easing): Select easing curves from the visual easing picker to control animation acceleration and deceleration.
- [CSS Filters](https://motion.page/docs/builder/filter): Configure CSS filter animations like blur, grayscale, brightness and more in the builder UI.
- [Border Color](https://motion.page/docs/builder/border-color): Animate border colors between any two values in the builder.
- [Connecting to Your Site](https://motion.page/docs/builder/connecting-sites): Enter a URL, connect to any website, and start building animations.
- [Scroll Trigger](https://motion.page/docs/builder/scroll-trigger): Set up scroll-based animations with start/end positions, scrub, toggle actions, pinning, and per-element iteration.
- [Text Flapper](https://motion.page/docs/builder/text-flapper): Create Solari split-flap display effects that cycle through characters before landing on the target text.
- [Page Load Trigger](https://motion.page/docs/builder/page-load): Configure auto-play on DOM ready or full page load.
- [Top Panel](https://motion.page/docs/builder/top-panel): Toolbar controls — undo/redo, device preview, zoom, playback, theme, and CDN toggle.
- [Click Trigger](https://motion.page/docs/builder/click-trigger): Configure click animations with toggle support.