{"id":18423218,"url":"https://github.com/cesarolvr/murphyjs-lib","last_synced_at":"2025-04-07T15:32:34.638Z","repository":{"id":45987542,"uuid":"164903177","full_name":"cesarolvr/murphyjs-lib","owner":"cesarolvr","description":" A simple way to implement scroll based reveal animations in your pages: https://cesarolvr.github.io/murphyjs-lib/index.html","archived":false,"fork":false,"pushed_at":"2023-02-28T06:42:52.000Z","size":2716,"stargazers_count":80,"open_issues_count":7,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-22T20:25:47.184Z","etag":null,"topics":["animation","css","intersection-observer","motion","scroll-events","smooth-scrolling","webanimation-api"],"latest_commit_sha":null,"homepage":"https://cesarolvr.github.io/murphyjs-lib/index.html","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/cesarolvr.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":"2019-01-09T16:58:51.000Z","updated_at":"2025-02-12T19:59:52.000Z","dependencies_parsed_at":"2024-11-06T04:36:37.257Z","dependency_job_id":"2f8026d1-e672-4f0a-bdcf-c4e976476376","html_url":"https://github.com/cesarolvr/murphyjs-lib","commit_stats":null,"previous_names":["cesarolvr/murphy"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarolvr%2Fmurphyjs-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarolvr%2Fmurphyjs-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarolvr%2Fmurphyjs-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarolvr%2Fmurphyjs-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cesarolvr","download_url":"https://codeload.github.com/cesarolvr/murphyjs-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247679843,"owners_count":20978137,"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":["animation","css","intersection-observer","motion","scroll-events","smooth-scrolling","webanimation-api"],"created_at":"2024-11-06T04:36:15.329Z","updated_at":"2025-04-07T15:32:32.621Z","avatar_url":"https://github.com/cesarolvr.png","language":"JavaScript","readme":"\u003ch5 align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/cesarolvr/murphyjs/master/murphyjs-logo.png\" width=\"650\"/\u003e\n\u003c/h5\u003e\n\n\u003ch4 align=\"center\"\u003eA JavaScript vanilla library to scroll based reveal animations \u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cem\u003emurphy.js\u003c/em\u003e is a lightweight JavaScript animation library with a simple implementation way.\u003cbr\u003e\n  All this works by joining of data-attributes, Web animate API and Intersection Observer API.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cesarolvr.github.io/murphyjs/index.html\" target=\"_blank\"\u003eDemo\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"#why-use-murphy\"\u003eWhy use murphy\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"#getting-started\"\u003eGetting started\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"#documentation\"\u003eDocumentation\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"#browser-support\"\u003eBrowser support\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## Why use murphy\n\n- ⚡️ Lightweight library (only 1.7KB gzipped).\n\n- 🍎 Easy and fast implementation.\n\n- 🎮 Total control of IntersectionObserver parameters.\n\n- 🎨 Full customization of time, duration, ease, delay and distance of each element individually.\n\n- 🎁 Some animations implemented by default.\n\n- 🏝 Plug and play solution to landing pages and simple projects.\n\n- ❎ Native fallback to not supported browsers.\n\n\u003cbr\u003e\n\n## Getting started\n\n### Download\n\nVia npm:\n\n```bash\n$ npm install murphyjs\n```\n\nVia file include:\n\nDownload file [here](https://raw.githubusercontent.com/cesarolvr/murphyjs/master/dist/index.js) and link in your HTML.\n```html\n\u003cscript src=\"./murphy/index.js\"\u003e\u003c/script\u003e\n```\n\n\n### Usage\nJust do three steps:\n\n#### ⛳ \u0026nbsp; Tag your HTML\n\nIn your markup, decore your element with attribute `data-murphy`.\n\u003cbr\u003e\n\n```html\n\u003cdiv data-murphy=\"left-to-right\"\u003eAny content here\u003c/div\u003e\n```\nThe default effect of murphy is `bottom-to-top`, but it's possible use `top-to-bottom`, `left-to-right` and `right-to-left` too.\n\n\n#### 🔌 \u0026nbsp; Reset your CSS\nIn your CSS, reset all the tagged elements.\n\n```css\n*[data-murphy] {\n  opacity: 0;\n}\n```\n\n#### 🚀 \u0026nbsp; Start murphy\n\nIn Javascript side, just import and run `play` when your page is completely loaded to start monitoring decorated elements.\n\n##### Import\n\n```javascript\nimport murphy from \"murphyjs\";\n```\n##### And trigger\n```javascript\nmurphy.play()\n```\n\n#### Or call from window\n\nIf you added murphy via **file include**, just access murphy's functions in window:\n```javascript\nwindow.murphy.play()\n// or just\nmurphy.play()\n```\n\n#### That is enough to work! 🤟🏿\n\n\u003cbr\u003e\n\n## Examples\n\n#### 1. This `data-attributes`:\n```html\n\u003cp data-murphy=\"bottom-to-top\"\u003eBottom to top\u003c/p\u003e\n\u003cp data-murphy=\"top-to-bottom\"\u003eTop to bottom\u003c/p\u003e\n\u003cp data-murphy=\"left-to-right\"\u003eLeft to right\u003c/p\u003e\n\u003cp data-murphy=\"right-to-left\"\u003eRight to left\u003c/p\u003e\n```\n\n####    Will result in that:\n\n\u003cimg src=\"https://raw.githubusercontent.com/cesarolvr/murphyjs/master/all.gif\" width=\"450\"/\u003e\n\n#### 2. To do the same effect that murphy's logo, use:\n```html\n\u003cp data-murphy=\"bottom-to-top\"\u003em\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"400\"\u003eu\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"500\"\u003er\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"600\"\u003ep\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"700\"\u003eh\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"800\"\u003ey\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"900\"\u003e.\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"1000\"\u003ej\u003c/p\u003e\n\u003cp data-murphy=\"bottom-to-top\" data-murphy-animation-delay=\"1100\"\u003es\u003c/p\u003e\n```\n\n####    Result:\n\u003cimg src=\"https://raw.githubusercontent.com/cesarolvr/murphyjs/master/logo.gif\" width=\"450\"/\u003e\n\n\u003cbr\u003e\n\n#### 🚨 Important\n\u003e These animations are triggered when scrolling the page, but when the tagged elements are already within the bounds of the screen, everything works like appearance animations that React Transition Group already does.\nSo if you need animations on the first load of site, murphy is for you!\n\n\n\u003cbr\u003e\n\n## Documentation\n\n### Attributes\nYou can configure the animation of each decorated element individually. Beyond the `data-murphy` attribute, other attributes are available:\n\u003cbr\u003e\n\n| Attribute | Value type | Default value  | What controls  |\n| ------ | ------     | --------- | --------- |\n| data-murphy    | String      | 'bottom-to-top' | - |\n| data-murphy-appearance-distance    | Int      | 50 *(px)* | - |\n| data-murphy-element-distance    | Int      | 30 *(px)* | - |\n| data-murphy-ease    | String      | 'ease' *(can be a cubic-bezier)* | - |\n| data-murphy-animation-delay    | Int      | 300 *(ms)* | - |\n| data-murphy-element-threshold    | Int      | 1 | - |\n| data-murphy-animation-duration    | Int      | 300 *(ms)* | - |\n\n\n### Methods\n\n| Method | What happens  |\n| ------ | ---------     |\n| play    | Start monitoring on element in DOM tagged with `data-murphy` |\n| reset    | Resets all data-murphy elements to their initial state. |\n\n\u003cbr\u003e\n\n## Browser support\n\n| Chrome | Safari | IE / Edge | Firefox | Opera |\n| ------ | ------ | --------- | ------- | ----- |\n| 58+    | 12.1+     | Not *(yet)* supported       | 55+     | 62+   |\n\n\n## License\n\nThe code is available under the [MIT License](LICENSE.md).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesarolvr%2Fmurphyjs-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcesarolvr%2Fmurphyjs-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesarolvr%2Fmurphyjs-lib/lists"}