Create smooth transition between individual DOM elements. Demo
<script src="https://unpkg.com/[email protected]/dist/shared-element.umd.js"></script>
yarn add shared-element
or
npm install shared-element
let transition = new SharedElement({ from, to });
transition.init(object);
transition.reverse();
Properties - type: Object
Key | Default | Type |
---|---|---|
duration |
300 | number |
easing |
easeInOutQuint | string |
withOverlay |
true | boolean |
delay |
0 | number |
format: {property: [from, to]}
example
transition.css({
borderRadius: ["2em", 0],
background: ["red", "blue"]
});
example
transition.points({
from: {
top: 100,
left: 400
},
to: {
top: 10,
left: 0
}
});