Package Exports

shared-element

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (shared-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Shared Element

Create smooth transition between individual DOM elements. Demo

Installation

<script src="https://unpkg.com/shared-element@1.0.0/dist/shared-element.umd.js"></script>

OR

yarn add shared-element

or

npm install shared-element

Usage

let transition = new SharedElement({ from, to });
transition.init(object);
transition.reverse();

Config

Methods

play
reverse
css
init
points

Init

Properties - type: Object

Key	Default	Type
`duration`	300	`number`
`easing`	easeInOutQuint	`string`
`withOverlay`	true	`boolean`
`delay`	0	`number`

CSS

format: {property: [from, to]}

example

transition.css({
  borderRadius: ["2em", 0],
  background: ["red", "blue"]
});

Points

example

transition.points({
  from: {
    top: 100,
    left: 400
  },
  to: {
    top: 10,
    left: 0
  }
});