@dancotton/segue
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

Segue

Segue makes shared element transitions declarative and easy for web developers.

It's a wrapper of the amazing GSAP flip plugin.

Quickstart

With Pre-made Bindings

We have pre-made bindings for react router (and more coming soon!) - check out our repo for the full set and quickstart instructions

With your own bindings

Install dependencies via your package manager of choice.

npm install --save @dancotton/segue

Add SegueReactRouter to your JSX tree anywhere under the RouterProvider. For example:

import Segue from '@dancotton/segue';

// Before you navigate / onClick of a link
Segue.preNavigate();

// After you navigate and the new page has rendered
Segue.postNavigate();

Finally - label any shared elements using the 'data-flip-id' attribute - e.g.

<div data-flip-id={`item-${item.id}`} />

This ID needs to be consistent across any pair of shared elements!

Additional bindings

Additional bindings coming soon!

Readme

Keywords

none

Package Sidebar

Install

npm i @dancotton/segue

Weekly Downloads

1

Version

0.0.3

License

MIT

Unpacked Size

4.2 kB

Total Files

9

Last publish

Collaborators

  • dancotton