move-into-view

move-into-view copied to clipboard

moveIntoView() shim (demo, animated demo)

moveIntoView() is such as scrollIntoView() Element shim but without scrolling, it move element into aspect ratio based position instead. Very useful for css driven scroll animations instead of heavy cpu based animations often used for scrolls.

Installation

Using npm:

npm install move-into-view

CDN version:

minified:

<script src="https://unpkg.com/move-into-view@latest/miw.min.js"></script>

debug
<script src="https://unpkg.com/move-into-view@latest/miw.js"></script>

Usage

html markup for example

 </style>

  <div class="parent">
    <div class="wrapper">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div id="center-me" class="child"></div>
      <div class="child"></div>
    </div>
  </div>

shim usage example

 document.getElementById('center-me').moveIntoView() // both x and y
 document.getElementById('center-me').moveIntoView({x: 0})
 document.getElementById('center-me').moveIntoView({y: 0.3})
 document.getElementById('center-me').moveIntoView({x: 1})

Commonjs usage:

var MoveIntoView = require('move-into-view');

MoveIntoView(childElement).move.x(0.3);
MoveIntoView(childElement).move.y(1);
MoveIntoView(childElement).move.both(1);

Animate it using css:

  .wrapper {
    transition: left .2s ease; /* anything */
  }

Only calculated position without applying it into element:

MoveIntoView(childElement).position(); // default 0.5 0.5
MoveIntoView(childElement).position(1); // x: 1  y default 0.5

MoveIntoView(childElement).position(0.5, 0.5); 

// returns { x: Number, y: Number }

License

MIT 2017 Svetlana Linuxenko