# @crossani/svelte

> A silky smooth declarative animation library for svelte.

Latest version **1.0.1** (published 2022-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @crossani/svelte
pnpm add @crossani/svelte
yarn add @crossani/svelte
bun add @crossani/svelte
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-11-03 |
| First published | 2022-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cain Atkinson |
| Maintainers | yellowsink |

## Links

- npm: https://www.npmjs.com/package/@crossani/svelte
- npm.io page: https://npm.io/package/@crossani/svelte

## Dependencies (1)

- [crossani](https://npm.io/package/crossani.md) ^1.3.3

## Recent versions

- 1.0.1 (latest) — 2022-11-03
- 1.0.0 — 2022-06-18

## README

## Svelte CrossAni

Bringing the awesome CrossAni transition and animation framework to Svelte.

## Installation

You don't need to install and import the main crossani package if you dont need
the EASE values available.

- `npm i crossani @crossani/svelte`
- `pnpm i crossani @crossani/svelte`
- `yarn add crossani @crossani/svelte`

## Usage

1. In your component, import `EASE` from crossani and `crossani` from @crossani/svelte, like so:

You may also import some utility types for stores later.

```html
<!-- ts completely optional of course -->
<script lang="ts">
  import {EASE} from "crossani";
  import crossani from "@crossani/svelte";
  // optional
  import type {InType, OutType} from "@crossani/svelte"
</script>
```

2. Create a store to trigger the animation, and hook up to an element:

```html

<script lang="ts">
  import {writable} from "svelte/store";

  let trigger = writable < InType > (); // for non-ts just omit the <InType>
</script>

<div
  use:crossani={[{}, trigger]}
></div>
```

3. Add some transitions (see main CrossAni readme)

```html

<script lang="ts">
  const transitions = {
    default: {
      state: {},
      reset: true,
      cutOff: true,
      ms: 500,
      easing: EASE.inOut,
    },
    alternate: {
      state: {"margin-top": "2rem"},
      ms: 250,
      easing: EASE.out,
    },
  }
</script>

<div
  use:crossani={[transitions, trigger]}
></div>
```

4. Run your transitions!

```html

<script lang="ts">
  import {onMount} from "svelte";

  onMount(() => {
    $trigger = "default";
  });
</script>
```

5. **OPTIONAL!!** Get the current state in a store

```html

<script lang="ts">
  let current = writable < OutType > ();
</script>

<div
  use:crossani={[{}, trigger, current]}
></div>

{#if typeof $current === "object"}
<em>Custom animation</em>
{:else if $current !== undefined}
{$current}
{:else}
<em>Not currently animating</em>
{/if}
```

## A complete example

```html

<script lang="ts">
  import {writable} from "svelte/store";
  import {EASE} from "crossani";
  import crossani, {InType, OutType} from "@crossani/svelte";

  const transitions = {
    default: {
      state: {},
      reset: true,
      cutOff: true,
      ms: 500,
      easing: EASE.inOut,
    },
    alternate: {
      state: {"margin-top": "2rem"},
      ms: 250,
      easing: EASE.out,
    },
  }

  let trigger = writable < InType > ();
  let current = writable < OutType > ();
</script>

{#if typeof $current === "object"}
  <em>Custom animation</em>
{:else if $current !== undefined}
  {$current}
{:else}
  <em>Not currently animating</em>
{/if}

<button on:click={() => $trigger = "alternate"}>trigger</button>
<button on:click={() => $trigger = "default"}>reset</button>

<div
  use:crossani={[transitions, trigger, current]}
></div>
```

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