move-into-view is such as sroll-into-view but better
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
tests
.eslintignore
.eslintrc.json
.gitignore npm preparation Mar 27, 2017
.npmignore
.travis.yml
LICENSE
README.md Update README.md Jul 26, 2017
index.js Element.moveIntoView() shim Mar 27, 2017
karma.conf.js
package.json
shim.js

README.md

moveIntoView() shim (demo, animated demo)

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

Animations:

  .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