1.0.1 • Published 5 years ago

shared-element v1.0.1

Weekly downloads
6
License
MIT
Repository
github
Last release
5 years ago

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

Init


Properties - type: Object

KeyDefaultType
duration300number
easingeaseInOutQuintstring
withOverlaytrueboolean
delay0number

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