# @graspologic/animation

> Graphical primitives

Latest version **0.7.0** (published 2021-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @graspologic/animation
pnpm add @graspologic/animation
yarn add @graspologic/animation
bun add @graspologic/animation
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2021-12-08 |
| First published | 2020-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 47.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Chris Trevino (chtrevin@microsoft.com) |
| Maintainers | darthtrevino, stopyoukid, essexbot, natoverse |

## Links

- npm: https://www.npmjs.com/package/@graspologic/animation
- Repository: https://github.com/microsoft/graspologic-js
- npm.io page: https://npm.io/package/@graspologic/animation

## Dependencies (2)

- [typedoc](https://npm.io/package/typedoc.md) 0.22.10
- [@graspologic/memstore](https://npm.io/package/@graspologic/memstore.md) 0.7.0

## Recent versions

- 0.7.0 (latest) — 2021-12-08
- 0.7.0-13 (prerelease) — 2021-03-23
- 0.4.1-beta.14.0 (beta.14) — 2020-09-11
- 0.4.0 (local.1) — 2020-09-10
- 0.7.0-12 — 2021-03-04
- 0.7.0-11 — 2021-03-04
- 0.7.0-10 — 2021-03-01
- 0.7.0-9 — 2021-02-23
- 0.7.0-8 — 2021-02-22
- 0.7.0-7 — 2021-01-11
- 0.7.0-6 — 2021-01-11
- 0.7.0-5 — 2020-12-23
- 0.7.0-4 — 2020-12-23
- 0.7.0-3 — 2020-12-23
- 0.0.7-3 — 2020-12-23
- … 9 more at https://npm.io/package/@graspologic/animation/versions

## README

# @graspologic/animation

Provides a set of utilities for animating `@graspologic/renderer` primitives.

## Usage

```js
import { createAnimationUtil, AnimationUtil } from '@graspologic/animation'
import { GraphRenderer } from '@graspologic/renderer'

// ...

// Create an instance of the animation util that can be re-used
const utils: AnimationUtil = createAnimationUtil()

/**
 * Randomizes the renderer's nodes/edges positions and colors
 */
export function randomizeRenderer(renderer: GraphRenderer) {
	for (const node of renderer.scene.nodes()) {
		const x = Math.random()
		const y = Math.random()
		const z = Math.random()

		// Animates the nodes color from it's previous color to 0xFF00BBFF over 1000ms
		utils.animatePosition(node, 'position', [x, y, z], 1000)

		// Animates the nodes color from it's previous color to 0xFF00BBFF over 500ms
		utils.animateColor(node, 'color', 0xff00bbff, 500)
	}

	for (const edge of renderer.scene.edges()) {
		const sourceX = Math.random()
		const sourceY = Math.random()
		const sourceZ = Math.random()
		const targetX = Math.random()
		const targetY = Math.random()
		const targetZ = Math.random()

		// Animates the edge's sourcePosition to the new source position over 2000ms
		utils.animatePosition(
			edge,
			'sourcePosition',
			[sourceX, sourceY, sourceZ],
			2000,
		)

		// Animates the edge's targetPosition immediately, since no duration was passed in
		utils.animatePosition(edge, 'targetPosition', [targetX, targetY, targetZ])
	}
}
```

See the [API documentation](./dist/docs/globals.md) or [examples](../../../examples) for additional examples.

---
_Source: https://npm.io/package/@graspologic/animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._