{"id":18311090,"url":"https://github.com/dmitriyakkerman/anime-in-viewport","last_synced_at":"2025-07-23T18:09:10.285Z","repository":{"id":144074452,"uuid":"389360087","full_name":"dmitriyakkerman/anime-in-viewport","owner":"dmitriyakkerman","description":"Simple way for triggering Anime.js animations on scroll event","archived":false,"fork":false,"pushed_at":"2021-10-16T17:39:17.000Z","size":311,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T12:11:18.988Z","etag":null,"topics":["animation","animejs","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmitriyakkerman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-25T13:58:51.000Z","updated_at":"2021-10-16T17:39:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"33338723-35e4-4a27-bb3c-e4b33481c205","html_url":"https://github.com/dmitriyakkerman/anime-in-viewport","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dmitriyakkerman/anime-in-viewport","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fanime-in-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fanime-in-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fanime-in-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fanime-in-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitriyakkerman","download_url":"https://codeload.github.com/dmitriyakkerman/anime-in-viewport/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fanime-in-viewport/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266726679,"owners_count":23974928,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animation","animejs","javascript"],"created_at":"2024-11-05T16:16:24.595Z","updated_at":"2025-07-23T18:09:10.263Z","avatar_url":"https://github.com/dmitriyakkerman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# anime-in-viewport\n\n![anime-in-viewport](/examples/example.gif)\n\n**Usage**\n\n1.Connect Anime.js and anime-in-viewport scripts.\n\n```js \n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js\" integrity=\"sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\u003e\u003c/script\u003e\n\u003cscript src=\"anime-in-viewport.min.js\"\u003e\u003c/script\u003e\n```\n\n2.Init your animation\n\n```js\nAnimeInViewport.init('.item', (el, i, l) =\u003e ({\n    translateY: ['100px', 0],\n    opacity: [0, 1],\n    easing: \"easeOutExpo\",\n    duration: 1000,\n    delay: () =\u003e i * 300\n}), '0px', 0)\n```\n     \n**Params**\n\n##### `param1`\nTarget element.\n\n*Type:* String  \n*Required:* true\n\n##### `param2`\nFunction which should return the object of Anime.js properties. Accepts 3 arguments: current target element, index of current target element and length of target elements. \n\n*Type:* Function  \n*Required:* true\n\n##### `param3`\nRootMargin. Native [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) parameter for margin around the target element.\n\n*Type:* String   \n*Required:* `false`  \n*Default:* `0px`  \n\n##### `param4`\nThreshold. Native [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) parameter which indicate at what percentage of the target's visibility the animation should be executed.\n\n*Type:* Number   \n*Required:* `false`  \n*Default:* `0`  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriyakkerman%2Fanime-in-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitriyakkerman%2Fanime-in-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriyakkerman%2Fanime-in-viewport/lists"}