JoshuaAmaju / shared-element

Create smooth transition between individual DOM elements.

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
  }
});