{"id":26722976,"url":"https://github.com/useallfive/ani-friend","last_synced_at":"2025-04-14T06:55:31.718Z","repository":{"id":34923518,"uuid":"190754366","full_name":"UseAllFive/ani-friend","owner":"UseAllFive","description":"A tool that makes animations a breeze.","archived":false,"fork":false,"pushed_at":"2022-12-10T18:28:36.000Z","size":4298,"stargazers_count":2,"open_issues_count":22,"forks_count":1,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-14T06:55:26.143Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/UseAllFive.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":"2019-06-07T14:10:33.000Z","updated_at":"2024-11-10T02:37:58.000Z","dependencies_parsed_at":"2023-01-15T10:29:45.268Z","dependency_job_id":null,"html_url":"https://github.com/UseAllFive/ani-friend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseAllFive%2Fani-friend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseAllFive%2Fani-friend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseAllFive%2Fani-friend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseAllFive%2Fani-friend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UseAllFive","download_url":"https://codeload.github.com/UseAllFive/ani-friend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837281,"owners_count":21169374,"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":[],"created_at":"2025-03-27T20:38:28.382Z","updated_at":"2025-04-14T06:55:31.689Z","avatar_url":"https://github.com/UseAllFive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"```\nnpm install --save ani-friend\n```\n\n# Animation Friend\n\nThis tool will reveal an area when in view and allow you to control\nhow the container and any children elements appear.\n\nAs the user scrolls, it can lazyload images when they’re at\none screen height lower.\n\nThere are built in animation presets, or you can build your own.\n\n![Example Zoom and Wipe motion](http://ua5.co/67e2fb2440aa/wipe-and-zoom.gif)\n![Example Text Motion](http://ua5.co/60c9d83d5ad8/ezgif-1-6b4c24069a4e.gif)\n\n### Usage\n\n```javascript\nimport { Ani } from 'ani-friend'\n\nconst ani = new Ani()\n\n// If new elements that are animation groups get added dynamically,\n// calling this will add any new elements with an ani attribute\nani.update()\n```\n\n```html\n\u003csection ani=\"basic-appear\"\u003e\n    \u003cimg ani-child load-src=\"/images/classes.jpg\" /\u003e\n    \u003cimg ani-child ani-child-order=\"4\" ani-preset=\"fade-down\" load-src=\"/images/marketing.jpg\" /\u003e\n    \u003cimg ani-child ani-child-order=\"2\" ani-preset=\"wipe-down\" load-src=\"/images/marketing.jpg\" /\u003e\n    \u003cdiv ani-child ani-preset=\"fade\" ani-child-order=\"1\" style=\"background: green; display: inline-block\"\u003e\n        \u003cimg ani-child ani-child-order=\"3\" ani-preset=\"wipe-left\" load-src=\"/images/marketing.jpg\" /\u003e\n    \u003c/div\u003e\n    \u003cimg ani-child ani-child-order=\"1\" ani-preset=\"fade-up\" load-src=\"/images/marketing.jpg\" /\u003e\n    \u003cimg ani-child ani-preset=\"class-my-class-name\" load-src=\"/images/marketing.jpg\" /\u003e\n\u003c/section\u003e\n```\n\nAdd this to your styles in the head, so all elements are hidden prior to DOM loading:\n\n```css\n[ani],\n[data-ani] {\n    opacity: 0;\n}\n```\n\n### HTML Attributes\n\nYou may preface each attribute with `data-` if necessary.\n- `ani`: Takes a string for the parent preset name\n- `ani-in-view-trigger-percent`: attribute for ani parents. Decimal - when to reveal the group. When scrolling, a lower number will show the item sooner than higher numbers.\n- `load-src`: add to image tags in lieu src attributes, and it will lazy load\n- `ani-child`: Defines this node to be a child\n- `ani-child-order`: you can sequence the order of nodes that come in\n  - If you leave `ani-child-order` blank, the el takes the dom order, but ranks lower than nodes that are set\n- `ani-delay-speed`: in seconds, it gets multiplied by its order or index\n- `ani-speed`: in seconds, the duration that the animation occurs in in\n- `ani-move-distance`: in pixels, for x/y transforms on the fade preset\n- `ani-preset`: Micro animations for individual objects.\n  -  `basic-appear` comes with: `fade`, `wipe`, `zoom`, `text`, and `class`\n  - Then you may append a direction `-up`, `-down`, `-left`, `-right`; Zoom: `-in` and `-out`. Text: `-line-mask` and `-line-appear`.\n  -  If you select class, you'll need to append a class name\n    - Example: `ani-preset=\"class-my-class-name\"` — this will add `my-class-name` to the element's class list in lieu of an appear function.\n  - For zoom, the element must be in a wrapper with an `overflow: hidden` that will crop the target.\n  - For text, it will break the text in an element into lines so they can be individually animated.\n- `ani-text-line-y-offset`: Positive or negative number to  adjust the starting offset of each line of text.\n- `ani-text-line-delay-speed`: Number to adjust the delay speed that each line appears at. It is multiplied by the line index.\n- `ani-ease`: String for ease property - see [gsap ease visualizer](https://greensock.com/ease-visualizer). Example: `ani-ease=\"Power4.easeInOut\"`.\n\n### Example animation Group Action\n\n```javascript\nAniGroupActions['basic-appear'] = (el, children) =\u003e {\n    el.style.opacity = 1\n    el.style.transition = 'none'\n    children.forEach((item, index) =\u003e {\n        let preset = ''\n        if (item.hasAttribute('ani-preset')) {\n            preset = item.getAttribute('ani-preset')\n        }\n        const ani = new AniElement(item, index, preset)\n        ani.appear()\n    })\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseallfive%2Fani-friend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuseallfive%2Fani-friend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseallfive%2Fani-friend/lists"}