# flip-toolkit

> Configurable FLIP animation helpers

Latest version **7.2.6** (published 2024-07-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install flip-toolkit
pnpm add flip-toolkit
yarn add flip-toolkit
bun add flip-toolkit
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.2.6 |
| Published | 2024-07-06 |
| First published | 2019-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 688 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4187 |
| Author | Alex Holachek |
| Maintainers | aholachek |
| Keywords | FLIP, transition, animation |

## Links

- npm: https://www.npmjs.com/package/flip-toolkit
- Repository: https://github.com/aholachek/react-flip-toolkit
- Homepage: https://github.com/aholachek/react-flip-toolkit#readme
- Issues: https://github.com/aholachek/react-flip-toolkit/issues
- npm.io page: https://npm.io/package/flip-toolkit

## Dependencies (1)

- [rematrix](https://npm.io/package/rematrix.md) 0.2.2

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 7.2.6 (latest) — 2024-07-06
- 7.2.5-2 (beta) — 2024-07-06
- 7.0.0-alpha-4.2.0 (alpha) — 2019-08-15
- 7.2.5-1 — 2024-07-06
- 7.2.5 — 2024-07-06
- 7.2.5-0 — 2024-07-06
- 7.2.4 — 2024-07-06
- 7.3.0-1 — 2024-07-06
- 7.3.0-0 — 2024-07-06
- 7.2.3 — 2024-07-06
- 7.2.2 — 2024-07-06
- 7.2.1 — 2024-07-06
- 7.2.1-1 — 2024-07-06
- 7.2.1-0 — 2024-07-06
- 7.2.0 — 2024-07-05
- … 39 more at https://npm.io/package/flip-toolkit/versions

## README

# flip-toolkit

[![Minified & Gzipped size](https://badgen.net/bundlephobia/minzip/flip-toolkit)](https://bundlephobia.com/result?p=flip-toolkit)
[![MIT license](https://badgen.net/npm/license/react-flip-toolkit)](http://opensource.org/licenses/MIT)
[![npm version](https://badgen.net/npm/v/flip-toolkit)](https://npmjs.org/package/flip-toolkit 'View this project on npm')

Using `Vue.js` ? Try [vue-flip-toolkit](https://github.com/mattrothenberg/vue-flip-toolkit).

## Basic Example

[**Fork this example on CodeSandbox**](https://codesandbox.io/s/5v1k1nwz8l)

```js
import { Flipper } from 'flip-toolkit'
const container = document.querySelector('.container')
const square = document.querySelector('.square')
const innerSquare = document.querySelector('.inner-square')

const flipper = new Flipper({ element: container })

// add flipped children to the parent
flipper.addFlipped({
  element: square,
  // assign a unique id to the element
  flipId: 'square',
  onStart: () => console.log('animation started!'),
  onSpringUpdate: springValue =>
    console.log(`current spring value: ${springValue}`),
  onComplete: () => console.log('animation completed!')
})

// to add an inverted child
// (so that the text doesn't warp)
// use this method with
// a reference to the parent element
flipper.addInverted({
  element: innerSquare,
  parent: square
})

square.addEventListener('click', () => {
  // record positions before they change
  flipper.recordBeforeUpdate()
  square.classList.toggle('big-square')
  // record new positions, and begin animations
  flipper.update()
})
```

To learn more about which configuration options are available, [check out the code for the `Flipper` class here](../react-flip-toolkit/src/FlipToolkit/Flipper.ts) or [read the docs for `react-flip-toolkit`](../react-flip-toolkit/README.md)

## Spring

`flip-toolkit` also exports a utility function, `spring`, that can be used to orchestrate non-FLIP animations.

[**Fork this example on CodeSandbox**](https://codesandbox.io/s/spring-example-6xw5p)

```js
import { spring } from "flip-toolkit";

const container = document.querySelector(".container");
const squares = [...container.querySelectorAll(".square")];

squares.forEach((el, i) => {
  spring({
    config: "wobbly",
    values: {
      translateY: [-15, 0],
      opacity: [0, 1]
    },
    onUpdate: ({ translateY, opacity }) => {
      el.style.opacity = opacity;
      el.style.transform = `translateY(${translateY}px)`;
    },
    delay: i * 25,
    onComplete: () => {
      // add callback logic here if necessary
    }
  });
});
```

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