{"id":18494777,"url":"https://github.com/sylvaincodes/next-animation","last_synced_at":"2025-05-14T02:33:03.957Z","repository":{"id":224217009,"uuid":"762751155","full_name":"sylvaincodes/next-animation","owner":"sylvaincodes","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-02T22:29:29.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-26T13:46:53.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/sylvaincodes.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":"2024-02-24T15:38:05.000Z","updated_at":"2024-03-02T22:29:33.000Z","dependencies_parsed_at":"2024-03-02T23:28:09.172Z","dependency_job_id":"d1853f7f-1b53-4491-bec3-7aef2b908ab4","html_url":"https://github.com/sylvaincodes/next-animation","commit_stats":null,"previous_names":["sylvaincodes/next-animation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Fnext-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Fnext-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Fnext-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaincodes%2Fnext-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sylvaincodes","download_url":"https://codeload.github.com/sylvaincodes/next-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239210242,"owners_count":19600498,"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":"2024-11-06T13:22:03.400Z","updated_at":"2025-02-16T23:26:25.808Z","avatar_url":"https://github.com/sylvaincodes.png","language":"CSS","readme":"# next-animation\n\nThis is a library for scroll animation.\nIt is a common UX pattern on the web. it provides animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll. \n\n## Features\n\n- 🔥 **Hot by default**\n- 🔩 **Easily Customizable**\n- ⏳ **Promise API** - _Automatic loader from a promise_\n- 🕊 **Lightweight** - _less than 45kb including styles_\n- ✅ **Accessible**\n- 🤯 **Headless Hooks** \n\n## Installation\n\n#### With yarn\n\n```sh\nyarn add next-animation\n```\n\n#### With NPM\n\n```sh\nnpm install next-animation\n```\n\n## Getting Started\n\nImport this component and wrap it to your Root Layout component. It will take care of rendering all animations emitted.\n\n```tsx\n\n  import {Scroll} from 'next-animation'\n\n```\n\nlike this : \n\n\n```tsx\n\n  \"use client\"\n\n...\n\nimport {Scroll} from 'next-animation'\n\ntype LayoutProps = {\n  params: { locale: string };\n  children: React.ReactNode;\n};\n\nfunction RootLayout({ params, children }: LayoutProps) {\n  const { locale } = params;\n\n  return (\n    \u003chtml\u003e\n\n      \u003cbody className={firaCode.className}\u003e\n\n        ...\n\n        \u003cScroll\u003e\n          \n        ...\n\n          {children}\n      \n        ...\n\n        \u003c/Scroll\u003e\n        \n        ...\n  \n      \u003c/body\u003e\n\n    \u003c/html\u003e\n  );\n}\nexport default RootLayout;\n\n```\n\nImport style to your main style file - be sure the path is correct.\nIf you are using Next js. import to global.css like this \n\n```tsx\n\n  @import '@/node_modules/next-animation/dist/style.css';\n\n```\n\nWrap a component with the attribute data-next-animation.\n\n```tsx\n\n  \u003cdiv data-next-animation\u003e\n    \n    ...\n\n  \u003c/div\u003e\n\n```\n\nScroll a component from left\n\n```tsx\n\n  \u003cdiv data-next-animation=\"left\"\u003e\n    \n    ...\n\n  \u003c/div\u003e\n\n```\n\nScroll a component from right\n\n```tsx\n\n  \u003cdiv data-next-animation=\"right\"\u003e\n    \n    ...\n\n  \u003c/div\u003e\n\n```\n\n\n## Licence \n\nnext-animation is licensed under the MIT license. https://opensource.org/licenses/MIT\n\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend updating the configuration to enable type aware lint rules:\n\n- Configure the top-level `parserOptions` property like this:\n\n```js\nexport default {\n  // other rules...\n  parserOptions: {\n    ecmaVersion: 'latest',\n    sourceType: 'module',\n    project: ['./tsconfig.json', './tsconfig.node.json'],\n    tsconfigRootDir: __dirname,\n  },\n}\n```\n\n- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`\n- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`\n- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` \u0026 `plugin:react/jsx-runtime` to the `extends` list\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvaincodes%2Fnext-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylvaincodes%2Fnext-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvaincodes%2Fnext-animation/lists"}