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-viewCDN 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