svelte-shared-transition

Transition shared elements between routes easily.

Install

yarn add svelte-shared-transition

Usage

import SharedTransition from "svelte-shared-transition";

<SharedTransition key="hero" />

<div data-key="hero"></div>

Transition starts once the components is mounted.

Props

| name | type | default | description | | -------- | ------- | ----------- | --------------------------------------------------- | | key | string | | the key shared by the elements to be transitioned. | | easing | string | ease-in-out | | | delay | number | 0.0 | | | duration | number | 250 | | | clear | boolean | false | clear animation properties when done transitioning. |

Methods

• play
• pause
• update

Demo