https://github.com/linuxenko/move-into-view

move-into-view is such as sroll-into-view but better
https://github.com/linuxenko/move-into-view

dom moveintoview positioning scrollintoview smart-tv

Last synced: 3 months ago
JSON representation

move-into-view is such as sroll-into-view but better

• Host: GitHub
• URL: https://github.com/linuxenko/move-into-view
• Owner: linuxenko
• License: mit
• Archived: true
• Created: 2017-02-10T12:33:16.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-21T12:35:27.000Z (over 4 years ago)
• Last Synced: 2024-07-08T17:40:37.176Z (4 months ago)
• Topics: dom, moveintoview, positioning, scrollintoview, smart-tv
• Language: JavaScript
• Homepage: http://codepen.io/linuxenko/full/OpozvL/
• Size: 40 KB
• Stars: 35
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-smarttv - Move-into-view - Better scrolling made for support css animation. (Source Code)

README

        
### moveIntoView() shim ([demo](http://codepen.io/linuxenko/full/OpozvL/), [animated demo](http://codepen.io/linuxenko/pen/VpGOMZ))

[![Build Status](https://img.shields.io/travis/linuxenko/move-into-view.svg?style=flat-square)](https://travis-ci.org/linuxenko/move-into-view) [![Coveralls](https://img.shields.io/coveralls/linuxenko/move-into-view/master.svg?style=flat-square)](https://coveralls.io/github/linuxenko/move-into-view) [![npm version](https://img.shields.io/npm/v/move-into-view.svg?style=flat-square)](https://www.npmjs.com/package/move-into-view) [![license](https://img.shields.io/github/license/linuxenko/move-into-view.svg?style=flat-square)]() [![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/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](https://raw.githubusercontent.com/linuxenko/linuxenko.github.io/master/media/move-into-view/schema.png)](http://codepen.io/linuxenko/full/OpozvL/)

#### Installation

Using `npm`:

```sh

npm install move-into-view

```

CDN version:

```html

minified:

debug

```

#### Usage

`html` markup for example

```html

 

  


    


      


      


      


      


      


    

  

```


`shim` usage example

```js

 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:

```js

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:

```css

  .wrapper {

    transition: left .2s ease; /* anything */

  }

```

Only calculated position without applying it into element:

```js

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