Skip to content

JoshuaAmaju/shared-element

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

About

Create smooth transition between individual DOM elements.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published