{"id":13722595,"url":"https://github.com/linuxenko/move-into-view","last_synced_at":"2025-05-07T15:30:49.068Z","repository":{"id":57303261,"uuid":"81563621","full_name":"linuxenko/move-into-view","owner":"linuxenko","description":"move-into-view is such as sroll-into-view but better","archived":true,"fork":false,"pushed_at":"2020-07-21T12:35:27.000Z","size":41,"stargazers_count":35,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T22:49:15.891Z","etag":null,"topics":["dom","moveintoview","positioning","scrollintoview","smart-tv"],"latest_commit_sha":null,"homepage":"http://codepen.io/linuxenko/full/OpozvL/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linuxenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-10T12:33:16.000Z","updated_at":"2024-05-03T23:14:29.000Z","dependencies_parsed_at":"2022-08-29T07:51:48.875Z","dependency_job_id":null,"html_url":"https://github.com/linuxenko/move-into-view","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxenko%2Fmove-into-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxenko%2Fmove-into-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxenko%2Fmove-into-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linuxenko%2Fmove-into-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linuxenko","download_url":"https://codeload.github.com/linuxenko/move-into-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252905603,"owners_count":21822829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","moveintoview","positioning","scrollintoview","smart-tv"],"created_at":"2024-08-03T01:01:30.618Z","updated_at":"2025-05-07T15:30:47.033Z","avatar_url":"https://github.com/linuxenko.png","language":"JavaScript","readme":"### moveIntoView() shim ([demo](http://codepen.io/linuxenko/full/OpozvL/), [animated demo](http://codepen.io/linuxenko/pen/VpGOMZ))\n\n[![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)\n\n\n`moveIntoView()` is such as `scrollIntoView()` `Element` `shim` but without\nscrolling, it move element into aspect ratio based position instead. Very\nuseful for css driven scroll animations instead of heavy cpu based animations\noften used for scrolls.\n\n[![Schema](https://raw.githubusercontent.com/linuxenko/linuxenko.github.io/master/media/move-into-view/schema.png)](http://codepen.io/linuxenko/full/OpozvL/)\n\n\n#### Installation\n\nUsing `npm`:\n\n```sh\nnpm install move-into-view\n```\nCDN version:\n\n```html\nminified:\n\n\u003cscript src=\"https://unpkg.com/move-into-view@latest/miw.min.js\"\u003e\u003c/script\u003e\n\ndebug\n\u003cscript src=\"https://unpkg.com/move-into-view@latest/miw.js\"\u003e\u003c/script\u003e\n```\n\n#### Usage\n\n`html` markup for example\n\n```html\n \u003c/style\u003e\n\n  \u003cdiv class=\"parent\"\u003e\n    \u003cdiv class=\"wrapper\"\u003e\n      \u003cdiv class=\"child\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"child\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"child\"\u003e\u003c/div\u003e\n      \u003cdiv id=\"center-me\" class=\"child\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"child\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n```\n\n`shim` usage example\n\n```js\n document.getElementById('center-me').moveIntoView() // both x and y\n document.getElementById('center-me').moveIntoView({x: 0})\n document.getElementById('center-me').moveIntoView({y: 0.3})\n document.getElementById('center-me').moveIntoView({x: 1})\n```\n\nCommonjs usage:\n\n```js\nvar MoveIntoView = require('move-into-view');\n\nMoveIntoView(childElement).move.x(0.3);\nMoveIntoView(childElement).move.y(1);\nMoveIntoView(childElement).move.both(1);\n```\n\nAnimate it using css:\n```css\n  .wrapper {\n    transition: left .2s ease; /* anything */\n  }\n```\n\nOnly calculated position without applying it into element:\n```js\nMoveIntoView(childElement).position(); // default 0.5 0.5\nMoveIntoView(childElement).position(1); // x: 1  y default 0.5\n\nMoveIntoView(childElement).position(0.5, 0.5); \n\n// returns { x: Number, y: Number }\n```\n\n\n#### License\n\nMIT 2017 Svetlana Linuxenko\n","funding_links":[],"categories":["Source Code"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinuxenko%2Fmove-into-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinuxenko%2Fmove-into-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinuxenko%2Fmove-into-view/lists"}