Miss any of our Open RFC calls?Watch the recordings here! »

layout-tween

1.0.1 • Public • Published

Layout Tween

This is a library to assist in animating changes to the DOM, to use it

  • Call the function on some elements whose children are going to be affected by your changes
  • Do your changes
  • Run the returned callback function to animate the changes

Demo

https://samsunginter.net/layout-tween/

Example

HTML

<ul>
  <li onClick="onclick(this)">Cat</li>
  <li onClick="onclick(this)">Dog</li>
  <li onClick="onclick(this)">Cow</li>
  <li onClick="onclick(this)">Horse</li>
</ul>

Javascript

import tween from './tween-dom.js';
 
function onclick(item){
 
  // These are the default options
  const options = {
    translate: true,      // Animate position change
    scale: true,          // Animate size change
    exemptParents: true,  // Will ignore elements explicitly passed when they are matched as a child of another element.
    exempt: [],           // List of element to exempt 
    animationOptions: {
      easing: 'ease-out', // Https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#Parameters
      duration: 500       // Animation duration
    }
  };
  
  const animate = tween(item.parentNode, document.body [, options])
  
  // Make some dom changes e.g. this.remove();
  
  animate();
}
 

Keywords

none

Install

npm i layout-tween

DownloadsWeekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

20.9 kB

Total Files

4

Last publish

Collaborators

  • avatar