# vueuse/motion

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vueuse-motion).**

2,756 stars · 93 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/vueuse/motion
- Homepage: https://motion.vueuse.org
- awesome-repositories: https://awesome-repositories.com/repository/vueuse-motion.md

## Topics

`composable` `composition-api` `motion` `popmotion` `popmotion-for-vue` `spring` `vue`

## Description

Motion is a declarative animation framework designed for Vue applications. It provides a system for defining complex visual states and element transformations through an object-based syntax, allowing developers to manage interface motion directly within component templates.

The library distinguishes itself by utilizing a physics-driven engine that calculates frame-by-frame values using spring-based mathematical models. This approach enables natural movement and fluid transitions between visual states without the need for manual keyframe management. By leveraging a fine-grained reactivity system, the framework synchronizes property changes with visual updates, ensuring that animations remain consistent with the underlying component state.

The system covers a broad range of motion design patterns, including viewport-triggered effects, interactive feedback for user inputs, and automated lifecycle orchestration for entry and exit sequences. It handles the normalization of geometric properties to ensure consistent rendering across different browser environments. The project is distributed as a collection of composables and directives that integrate into the standard Vue component lifecycle.

## Tags

### User Interface & Experience

- [Declarative Motion Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-motion-frameworks.md) — Provides a declarative system for defining visual states and complex element transformations using an object-based syntax.
- [Physics-Based Animations](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations.md) — Implements natural movement and spring-based transitions for interface components without manual keyframe management.
- [Spring Animations](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations/spring-animations.md) — Calculates frame-by-frame values using spring-based mathematical models for natural, fluid movement.
- [Declarative UI Motion Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-motion-frameworks.md) — Enables defining complex animation sequences and state transitions directly within component templates.
- [DOM Animation Engines](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines/dom-animation-engines.md) — Orchestrates smooth transitions, viewport-triggered effects, and interactive motion sequences across modern browser environments.
- [Animation Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/animation-lifecycle-hooks.md) — Hooks into component mounting and unmounting to automatically execute entry and exit animation sequences.
- [Component Variant Management](https://awesome-repositories.com/f/user-interface-experience/component-variant-management.md) — Organizes complex animation sequences into named objects for predictable switching between visual configurations.
- [Scroll-Triggered Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations/scroll-triggered-animations.md) — Automatically executes motion sequences when elements enter the visible screen area.
- [Interactive Interface Design](https://awesome-repositories.com/f/user-interface-experience/interactive-graphics/interactive-interface-design.md) — Provides responsive visual feedback for user interactions like hover, focus, and tap events.

### Web Development

- [Vue Component Libraries](https://awesome-repositories.com/f/web-development/vue-component-wrappers/vue-component-libraries.md) — Ships a collection of composables and directives for creating declarative, physics-based animations within components.
- [Attribute-Based Directives](https://awesome-repositories.com/f/web-development/attribute-based-directives.md) — Maps component lifecycle events and user interactions to animation states using custom template attributes.
- [Animation Utilities](https://awesome-repositories.com/f/web-development/vue-component-wrappers/vue-component-libraries/animation-utilities.md) — Provides composables and directives to add fluid motion and visual transitions to interface elements.

### Software Engineering & Architecture

- [Reactive Visual Properties](https://awesome-repositories.com/f/software-engineering-architecture/change-tracking-systems/property-reactivity/reactive-visual-properties.md) — Synchronizes visual updates with component state changes using a fine-grained reactivity system.