# liquid-fire

> Animated transitions for Ember applications.

Latest version **0.37.1** (published 2025-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install liquid-fire
pnpm add liquid-fire
yarn add liquid-fire
bun add liquid-fire
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.37.1 |
| Published | 2025-05-13 |
| First published | 2014-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 263 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1135 |
| Author | Edward Faulkner |
| Maintainers | rwwagner90, jamesreggio, ef4, runspired, rlivsey, mkszepp |
| Keywords | ember-addon |

## Links

- npm: https://www.npmjs.com/package/liquid-fire
- Repository: https://github.com/ember-animation/liquid-fire
- Homepage: https://github.com/ember-animation/liquid-fire#readme
- Issues: https://github.com/ember-animation/liquid-fire/issues
- npm.io page: https://npm.io/package/liquid-fire

## Dependencies (3)

- [ember-modifier](https://npm.io/package/ember-modifier.md) ^4.2.0
- [@embroider/macros](https://npm.io/package/@embroider/macros.md) ^1.13.1
- [@embroider/addon-shim](https://npm.io/package/@embroider/addon-shim.md) ^1.8.6

## Recent versions

- 0.37.1 (latest) — 2025-05-13
- 0.37.0 — 2024-08-19
- 0.36.2 — 2024-08-06
- 0.36.1 — 2023-10-13
- 0.36.0 — 2023-09-18
- 0.35.1 — 2023-06-21
- 0.35.0 — 2023-01-24
- 0.34.0 — 2022-01-20
- 0.33.1 — 2022-01-03
- 0.33.0 — 2021-11-28
- 0.32.0 — 2021-10-18
- 0.31.0 — 2019-10-16
- 0.30.0 — 2019-06-10
- 0.29.5 — 2018-07-31
- 0.29.4 — 2018-07-28
- … 86 more at https://npm.io/package/liquid-fire/versions

## README

# Liquid Fire

Comprehensive animation support for ambitious Ember applications. [Interactive Documentation is here](http://ember-animation.github.io/liquid-fire/).

## Features

- Animated transitions between routes that work seamlessly with the
  Ember router.

- A DSL for laying out your spatial route relationships, cleanly
  separated from view-layer implementation details.

- Animated transitions between models within a single route.

- Animated transitions between individual scalar values within a
  template.

- Promise-driven API to control your animation flow.

- Backed by velocity.js, but easy to extend to other animation drivers
  if there's interest.

## Documentation

[Liquid Fire website](http://ember-animation.github.io/liquid-fire) is an ember-cli application that contains an
interactive demo & documentation. It runs from Liquid Fire's [test dummy app](https://github.com/ember-animation/liquid-fire/tree/master/tests/dummy/app).

You can also see some examples in my [Ember Animation Demo](http://github.com/ef4/ember-animation-demo) repo, and this [video presentation from the Boston Ember Meetup](https://www.youtube.com/watch?v=S4M78SO3gAc).

### Ember Compatibility Table

| Ember Version     | Liquid Fire Release |
| ----------------- | ------------------- |
| 3.28 and newer    | latest              |
| 3.16 through 5.10 | 0.36.x              |
| 3.16 through 4.12 | 0.35.x              |
| 2.12 through 3.15 | 0.33.x              |
| 1.13 through 2.11 | 0.29.x              |
| 1.11 through 1.12 | 0.19.x              |
| 1.8 through 1.10  | 0.17.x              |

## Development

### Source Organization

This repo contains both the liquid-fire library and a demo application
that presents interactive documentation. It follows standard ember-cli
addon v2 format.

- liquid-fire: is code that can be imported by the user from the `liquid-fire` namespace
- docs: is the demo and documentation application
- test-app: is the testing

## Testing

When running tests you'll want to set your transition speeds to 0 so they don't slow down your tests. This can be accomplished by using an Environment variable.

```javascript
// Import the Environment
import ENV from "your-application-name/config/environment";

// If Testing Environment
if (ENV.environment === "test") {
  var customDuration = 0; // set to 0 seconds
} else {
  var customDuration = 200; // set to 200 miliseconds
}

this.transition(
  this.toRoute("foo"),
  this.use("toLeft", { duration: customDuration }) // Use customDuration
);
```

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