{"id":15654559,"url":"https://github.com/johannschopplich/animere","last_synced_at":"2025-05-01T02:48:13.949Z","repository":{"id":57180240,"uuid":"274931907","full_name":"johannschopplich/animere","owner":"johannschopplich","description":"🍃 CSS-driven scroll-based animations","archived":false,"fork":false,"pushed_at":"2025-01-22T04:40:55.000Z","size":1502,"stargazers_count":27,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-01T02:48:01.064Z","etag":null,"topics":["accessible","animation","scroll","scroll-animation","seo-friendly"],"latest_commit_sha":null,"homepage":"https://animere.netlify.app","language":"TypeScript","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/johannschopplich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"custom":["https://paypal.me/jschopplich"]}},"created_at":"2020-06-25T14:05:07.000Z","updated_at":"2025-01-16T21:54:41.000Z","dependencies_parsed_at":"2024-06-21T19:07:01.014Z","dependency_job_id":"99341964-33db-47d7-a2f0-9b35a0de8ca5","html_url":"https://github.com/johannschopplich/animere","commit_stats":{"total_commits":188,"total_committers":1,"mean_commits":188.0,"dds":0.0,"last_synced_commit":"4a2eb2b728ec5242e85611514259b9f63f1701a7"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannschopplich%2Fanimere","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannschopplich%2Fanimere/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannschopplich%2Fanimere/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johannschopplich%2Fanimere/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johannschopplich","download_url":"https://codeload.github.com/johannschopplich/animere/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251815442,"owners_count":21648367,"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":["accessible","animation","scroll","scroll-animation","seo-friendly"],"created_at":"2024-10-03T12:52:26.929Z","updated_at":"2025-05-01T02:48:13.910Z","avatar_url":"https://github.com/johannschopplich.png","language":"TypeScript","funding_links":["https://paypal.me/jschopplich"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/img/favicon.svg\" alt=\"Animere.js Logo\" width=\"180\" height=\"180\"\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eAnimere.js\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  CSS-driven scroll-based animations\u003cbr\u003e\n  \u003ca href=\"https://animere.netlify.app\"\u003e\u003cstrong\u003eExplore the demo »\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## Animere.js\n\n### Key Features\n\n- 🍃 **Lightweight**: 1 kB minified \u0026 gzipped\n- ✨ **CSS-driven**: Utilizes [Animate.css](https://animate.style) under the hood\n- 🔧 **Customizable**: Use `data` attributes for animation duration, delay, repeat\n- ♿️ **Accessible**: Respects reduced motion preference\n- 🔍 **SEO-friendly**: Detects e.g. Google Bot and skips initialization\n\n## Installation\n\nAnimere.js can be used without a build step. Simply load it from a CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/animere\" defer init\u003e\u003c/script\u003e\n\n\u003c!-- Anywhere on the page --\u003e\n\u003cdiv data-animere=\"fadeIn\"\u003e\u003c/div\u003e\n```\n\n- The `defer` attribute makes the script execute after HTML content is parsed.\n- The `init` attribute tells Animere.js to automatically initialize and animate all elements that have a `data-animere` attribute.\n\n### Manual Initialization\n\nIf you don't want the auto initialize, remove the `init` attribute and move the scripts to end of `\u003cbody\u003e`:\n\n```html\n\u003cscript src=\"https://unpkg.com/animere\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  Animere().createAnimere()\n\u003c/script\u003e\n```\n\nOr, use the ES module build by installing the `animere` npm package:\n\n```js\nimport { createAnimere } from 'animere'\n\ncreateAnimere()\n```\n\n### Production CDN URLs\n\nThe short CDN URLs are meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:\n\n- Global build: https://unpkg.com/animere@3.0.0/dist/animere.iife.js\n  - Exposes `Animere` global property, supports auto initializing\n- ESM build: https://unpkg.com/animere@3.0.0/dist/animere.mjs\n  - Must be used with `\u003cscript type=\"module\"\u003e`\n\n### CSS Animations\n\n[Animate.css](https://animate.style) is required. You may include the `animate.css` stylesheet into your project manually or link a cloud-hosted version:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\" /\u003e\n```\n\n## Usage\n\nAdd the `data-animere` attribute to an element of your choice which you seek to animate. Set any animation name available from [Animate.css](https://animate.style) (without the `animate__` class name prefix).\n\n```html\n\u003cdiv data-animere=\"fadeIn\"\u003e\u003c/div\u003e\n```\n\n\u003e Note: You can customize the data attribute prefix `animere`. Head over to [API](#api) to read more.\n\nYou can use any of the utility classes/custom properties provided by Animate.css much easier through their corresponding `data` attributes. All custom animation options beginning with `data-animere-` (respectively the data attribute prefix you chose) will be passed to Animate.css. Head over to [Utilities](#utilities) to read more.\n\nFinally, to initialize the library, instantiate it:\n\n```js\nimport { createAnimere } from 'animere'\n\ncreateAnimere()\n```\n\n### Flash of Unstyled Content (FOUC)\n\nTo prevent flash of unstyled content, we want to hide all elements which are about to be animated later. This will be handled by CSS.\n\nBut before we do so, first we check if animations are appropriate in the current context. We implement a custom initialization resolver, which resembles the logic Animere.js uses by default. Add the following script to your document's `\u003chead\u003e`:\n\n```js\n(() =\u003e {\n  if (\n    !matchMedia('(prefers-reduced-motion: reduce)').matches\n    \u0026\u0026 !/(?:gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent)\n  ) {\n    document.documentElement.dataset.animatable = ''\n  }\n})()\n```\n\nNow, hide all elements to be animated before the DOM renders:\n\n```css\n:root[data-animatable] :where([data-animere]) {\n  visibility: hidden;\n}\n```\n\nAs a last step, instantiate Animere accordingly by using a custom initialization resolver:\n\n```js\nconst animere = createAnimere({\n  shouldInitialize: () =\u003e 'animatable' in document.documentElement.dataset,\n})\n```\n\n## Utilities\n\n| Option   | Example Attribute                | Description                                         |\n| -------- | -------------------------------- | --------------------------------------------------- |\n| Duration | `data-animere-duration=\"1500ms\"` | Change the animation's duration to be slow or fast. |\n| Delay    | `data-animere-delay=\"1s\"`        | Delay the animation.                                |\n| Repeat   | `data-animere-repeat=\"3\"`        | The iteration count of the animation.               |\n\n## API\n\n### createAnimere(options: AnimereOptions)\n\nAvailable options are:\n\n| Option             | Default     | Description                                                                                                                                                                                                                                      |\n| ------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `prefix`           | `animere`   | The prefix for `data` attributes, e.g. resulting in `data-animere` for the default value.                                                                                                                                                        |\n| `offset`           | `0.2`       | Number between `0` and `1` of how much an element should be in the viewport before revealing it. See `IntersectionObserver` [`threshold` parameter](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver). |\n| `shouldInitialize` | `undefined` | Custom handler for Animere's initialization evaluation. Replaces the default checks for reduced motion preference and crawler detection. Return `true` to skip Animere's initialization.                                                         |\n\n## Accessibility\n\nAnimere.js supports the `prefers-reduced-motion` media query so for users with motion sensitivity the library will not enable any animations.\n\n## SEO\n\nAnimere.js does not hide elements from Google. Since the Google Bot doesn't scroll/interact with your website, the library detects whether the user agent is capable to scroll and if not, bails initialization.\n\n## FAQ\n\n### Why Yet Another on Scroll Animation Library?\n\nBecause I couldn't find one that is as small as possible while being also versatile, SEO-friendly and accessible.\n\n## Credits\n\n- [Animate.css](https://animate.style) for the best, easy to use library of CSS animations.\n\n## License\n\n[MIT](./LICENSE) License © 2021-PRESENT [Johann Schopplich](https://github.com/johannschopplich)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohannschopplich%2Fanimere","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohannschopplich%2Fanimere","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohannschopplich%2Fanimere/lists"}