# maxwellito/vivus

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

15,460 stars · 1,130 forks · JavaScript · mit

## Links

- GitHub: https://github.com/maxwellito/vivus
- awesome-repositories: https://awesome-repositories.com/repository/maxwellito-vivus.md

## Description

Vivus is a lightweight JavaScript library designed to animate the drawing of vector graphics within web browsers. It functions as a specialized motion framework that renders and animates complex illustrations by progressively revealing SVG path strokes.

The library enables the creation of fluid, programmatic drawing effects for icons and decorative elements. By manipulating path lengths and synchronizing updates with the browser refresh rate, it provides a controlled method for applying motion to static vector assets.

The engine supports custom timing and sequencing through declarative easing functions and lifecycle hooks. These capabilities allow for the orchestration of multi-step visual transitions and the dynamic modification of element attributes during the animation process.

## Tags

### Graphics & Multimedia

- [Vector Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/vector-animation-libraries.md) — Functions as a lightweight library for animating the drawing of SVG paths to create smooth, progressive stroke reveal effects. ([source](http://maxwellito.github.io/vivus))
- [UI Motion Frameworks](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/ui-motion-frameworks.md) — Acts as a specialized animation engine for controlling the timing and visual progression of graphical elements on a webpage.

### Part of an Awesome List

- [SVG Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries.md) — Library for creating SVG drawing animations.

### Software Engineering & Architecture

- [SVG](https://awesome-repositories.com/f/software-engineering-architecture/runtime-path-resolvers/path-normalizers/svg.md) — Calculates total path lengths to control stroke-dashoffset properties for progressive drawing animations.

### User Interface & Experience

- [Animation Lifecycle Callbacks](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-lifecycle-callbacks.md) — Provides lifecycle hooks that trigger custom functions at specific animation milestones for orchestrating multi-step visual sequences.
- [Motion Libraries](https://awesome-repositories.com/f/user-interface-experience/motion-libraries.md) — Adds fluid motion to static vector illustrations on websites to improve user engagement and visual storytelling.
- [Animation Easing Functions](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/animation-easing-functions.md) — Supports custom timing and sequencing through declarative easing functions that control the acceleration and flow of stroke reveals.
- [Animation Loops](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/frame-execution-synchronization/animation-loops.md) — Synchronizes animation frames with the browser refresh rate to ensure smooth visual transitions during the drawing process.