move-into-view

move-into-view is such as scroll-into-view but better.

Usage no npm install needed!

<script type="module">
  import moveIntoView from 'https://cdn.skypack.dev/move-into-view';
</script>

README

moveIntoView() shim (demo, animated demo)

Build Status Coveralls npm version license Standard - JavaScript Style Guide semantic-release

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.

Schema

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