# mojs/mojs

**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/mojs-mojs).**

18,670 stars · 888 forks · CoffeeScript · mit

## Links

- GitHub: https://github.com/mojs/mojs
- Homepage: https://mojs.github.io
- awesome-repositories: https://awesome-repositories.com/repository/mojs-mojs.md

## Topics

`animation` `burst` `design` `es6` `graphics` `javascript` `library` `mo-js` `modern` `mojs` `motion` `motion-graphics` `shape` `svg` `swirl` `timeline` `toolbelt` `web` `webpack`

## Description

This project is a declarative animation library and high-performance engine designed for creating fluid, interactive vector motion graphics on the web. It provides a specialized framework for defining, rendering, and orchestrating complex visual sequences, including custom geometric shapes and dynamic property transitions.

The library distinguishes itself through a robust particle system framework that generates explosive or organic visual effects by emitting multiple shapes with randomized trajectories and paths. It utilizes a master timeline controller to synchronize independent animation instances, allowing for the chaining of sequential transitions and the application of organic motion effects like sinusoidal pathing.

The system supports the creation of custom vector primitives through an extensible component-based architecture, enabling developers to define unique shapes that respond to real-time property updates. It manages these animations through declarative property interpolation and reactive binding, ensuring that visual attributes remain synchronized across complex, multi-step sequences.

## Tags

### Graphics & Multimedia

- [Animation & Motion Graphics](https://awesome-repositories.com/f/graphics-multimedia/animation-motion.md) — Creates fluid and interactive visual animations for websites using a declarative interface to manage shape movement and property transitions.
- [Animation Engines](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/animation-engines.md) — Provides a high-performance engine for managing synchronized animation timelines, property transitions, and dynamic motion sequences.
- [Particle Systems](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/particle-systems.md) — Generates explosive or organic visual effects by emitting multiple shapes with randomized trajectories and paths.
- [Vector Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/vector-animation-libraries.md) — Renders and animates custom geometric shapes and paths that respond dynamically to property changes like scale, color, and rotation.
- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Generates and manipulates geometric shapes by dynamically updating the SVG document object model.
- [Custom Shape Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/custom-shape-rendering.md) — Implements a rendering system for defining, styling, and animating custom geometric shapes with support for path-based movement.
- [Vector Graphics Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/vector-rendering-pipelines/vector-graphics-renderers.md) — Renders customizable geometric shapes that respond dynamically to property changes like scale, color, and rotation. ([source](https://mojs.github.io/tutorials/))
- [State Transition Animators](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators.md) — Defines start and end values for concurrent, multi-property animations to create smooth visual transitions. ([source](https://mojs.github.io/tutorials/shape-swirl/))

### User Interface & Experience

- [Declarative Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/declarative-animation-libraries.md) — Offers a declarative library for creating fluid, interactive vector animations and complex particle effects on the web.
- [Timeline Orchestrators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/timeline-sequence-management/animation-timelines/timeline-orchestrators.md) — Provides a master timeline controller to synchronize independent animation instances and manage global playback state.
- [Animation Timelines](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/timeline-sequence-management/animation-timelines.md) — Synchronizes individual shapes and sequences within a master timeline to ensure alignment during complex playback. ([source](https://mojs.github.io/tutorials/shape-swirl/))
- [Sequential Animation Orchestrators](https://awesome-repositories.com/f/user-interface-experience/sequential-animation-orchestrators.md) — Links multiple animation states and sequences into synchronized timelines to build complex, multi-step transitions.
- [Animation Playback Controls](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-playback-controls.md) — Provides programmatic control over animation playback, including trigger, pause, and reset commands for synchronized sequences. ([source](https://mojs.github.io/tutorials/usage-with-react.html))
- [Physics-Based Property Interpolators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations/physics-based-property-interpolators.md) — Calculates intermediate property values by mapping start and end states across a normalized timeline.

### Software Engineering & Architecture

- [Property Reactivity](https://awesome-repositories.com/f/software-engineering-architecture/change-tracking-systems/property-reactivity.md) — Updates visual attributes in real-time by observing state changes and applying them to the animation loop.

### Programming Languages & Runtimes

- [Animation Randomizers](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/language-features/core-conceptual-frameworks/programming-language-concepts/random-number-generation/animation-randomizers.md) — Injects randomized values into animation properties to create unique, non-repetitive visual sequences. ([source](https://mojs.github.io/tutorials/burst/))