Shared Element

Create smooth transition between individual DOM elements. Demo

Installation

<script src="https://unpkg.com/[email protected]/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
  }
});