# flipping-move-only

> Flipping awesome animations.

Latest version **0.8.0** (published 2017-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install flipping-move-only
pnpm add flipping-move-only
yarn add flipping-move-only
bun add flipping-move-only
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2017-12-26 |
| First published | 2017-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1420 |
| Author | David |
| Maintainers | lots0logs |
| Keywords | flip, animation |

## Links

- npm: https://www.npmjs.com/package/flipping-move-only
- Repository: https://github.com/davidkpiano/flipping
- Homepage: https://github.com/davidkpiano/flipping#readme
- Issues: https://github.com/davidkpiano/flipping/issues
- npm.io page: https://npm.io/package/flipping-move-only

## Dependencies (2)

- [mitt](https://npm.io/package/mitt.md) ^1.1.2
- [rematrix](https://npm.io/package/rematrix.md) ^0.1.0

## 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

- 0.8.0 (latest) — 2017-12-26

## README

# Flipping (beta)

A tiny library (and collection of adapters) for [implementing FLIP transitions](https://aerotwist.com/blog/flip-your-animations/) easily.
Still in beta! Expect the API to change slightly before v1.0.

For more information about the FLIP technique, [view the FLIPping slides](https://slides.com/davidkhourshid/flipping).

## Quick Start
```
npm install flipping --save
```

Or grab the files directly:
- https://unpkg.com/flipping@latest/dist/flipping.js (core)
- https://unpkg.com/flipping@latest/dist/flipping.web.js (WAAPI adapter)
- https://unpkg.com/flipping@latest/dist/flipping.gsap.js (GSAP adapter)

```js
// import Flipping from 'flipping/strategies/web';
// import Flipping from 'flipping/strategies/gsap';
import Flipping from 'flipping';

const flipping = new Flipping();

// or, for example:
// const flipping = new Flipping({
//   onFlip: (state) => doYourAnimation(state)
// });

// ...
flipping.read();

doSomething(); // anything that changes the layout

flipping.flip();
```

```html
<!-- first view -->
<section class="gallery">
  <div class="photo-1" data-flip-key="photo-1">
    <img src="/photo-1"/>
  </div>
  <div class="photo-2" data-flip-key="photo-2">
    <img src="/photo-2"/>
  </div>
  <div class="photo-3" data-flip-key="photo-3">
    <img src="/photo-3"/>
  </div>
</section>

<!-- second view -->


<section class="details">
  <div class="photo" data-flip-key="photo-1">
    <img src="/photo-1"/>
  </div>
  <p class="description">
    Lorem ipsum dolor sit amet...
  </p>
</section>
```

## API

Coming soon! For now, take a look at some of these examples:
- https://codepen.io/davidkpiano/pen/RjaBpW
- https://codepen.io/davidkpiano/pen/xLKBpM

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