{"id":18453962,"url":"https://github.com/mathiasoxholm/humblescroll-nuxt","last_synced_at":"2026-03-07T20:31:34.814Z","repository":{"id":191645278,"uuid":"684288682","full_name":"MathiasOxholm/humblescroll-nuxt","owner":"MathiasOxholm","description":"Nuxt 3 animate on scroll","archived":false,"fork":false,"pushed_at":"2023-11-08T18:26:42.000Z","size":340,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-22T23:22:40.735Z","etag":null,"topics":["animate-on-scroll","nuxt","scroll-animations","vue"],"latest_commit_sha":null,"homepage":"https://humblescroll-docs.oxholm.dev/","language":"Vue","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/MathiasOxholm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2023-08-28T20:45:53.000Z","updated_at":"2024-08-31T18:10:51.000Z","dependencies_parsed_at":"2023-11-10T12:19:20.427Z","dependency_job_id":null,"html_url":"https://github.com/MathiasOxholm/humblescroll-nuxt","commit_stats":null,"previous_names":["mathiasoxholm/humblescroll-nuxt"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/MathiasOxholm/humblescroll-nuxt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasOxholm%2Fhumblescroll-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasOxholm%2Fhumblescroll-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasOxholm%2Fhumblescroll-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasOxholm%2Fhumblescroll-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MathiasOxholm","download_url":"https://codeload.github.com/MathiasOxholm/humblescroll-nuxt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasOxholm%2Fhumblescroll-nuxt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30229741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["animate-on-scroll","nuxt","scroll-animations","vue"],"created_at":"2024-11-06T08:02:22.741Z","updated_at":"2026-03-07T20:31:34.766Z","avatar_url":"https://github.com/MathiasOxholm.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HumbleScroll Nuxt\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nHumbleScroll is a lightweight and minimalistic animation on scroll Nuxt module. It's easy to use and has no dependencies. The library is based on Intersection Observer combined with CSS Custom Props for easy customization.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n\u003c!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/humblescroll-nuxt?file=playground%2Fapp.vue) --\u003e\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Includes\n\n- Vue plugin (Nuxt module)\n- TailwindCSS plugin\n- HumbleScroll component\n\n## Features\n\n- CSS animations\n- Customize with CSS variables\n- TailwindCSS utility classes\n- Uses the Intersection Observer API\n\n## Quick Setup\n\n### 1. Add `humblescroll-nuxt` dependency to your project\n\n```bash\n# Using pnpm\npnpm add -D humblescroll-nuxt\n\n# Using yarn\nyarn add -D humblescroll-nuxt\n\n# Using npm\nnpm install -D humblescroll-nuxt\n```\n\n### 2. Add `humblescroll-nuxt` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    'humblescroll-nuxt'\n  ]\n})\n```\n\n### 3. Install the TailwindCSS plugin\n\nImport the TailwindCSS plugin in your `tailwind.config.js` file.\n\n```js\n// tailwind.config.js\n\nimport { humbleScrollTailwindPlugin } from 'humblescroll-vue'\n\nexport default {\n  content: [],\n  theme: {},\n  plugins: [\n    humbleScrollTailwindPlugin\n  ]\n}\n```\n\n### 4. Use the HumbleScroll component\n\nUse the HumbleScroll component in your Vue components.\n\n```html\n\u003ctemplate\u003e\n  \u003cHumbleScroll animation=\"fade up\"\u003e\n    \u003ch1 class=\"text-4xl font-bold\"\u003eHumbleScroll\u003c/h1\u003e\n  \u003c/HumbleScroll\u003e\n\u003c/template\u003e\n```\n\n## Customization\n\n### CSS variables\n\nAdjust global animation settings in your stylesheet\n\n```css\n:root {\n  --hs-duration: 800ms;\n  --hs-delay: 100ms;\n  --hs-translate-x-amount: 10rem;\n  --hs-translate-y-amount: 8rem;\n  --hs-rotate: -5deg;\n  --hs-easing: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n}\n```\n\nAll Custom properties that can be customized. The default values are shown below.\n\n```css\n:root {\n  --hs-delay: 0ms;\n  --hs-easing: var(--hs-ease-out);\n  --hs-duration: 600ms;\n  --hs-ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --hs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n  --hs-ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --hs-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);\n  --hs-opacity: 1;\n  --hs-translate-y: 0;\n  --hs-translate-x: 0;\n  --hs-scale: 1;\n  --hs-rotate: 0deg;\n  --hs-perspective: 0;\n  --hs-rotate-x: 0deg;\n  --hs-rotate-y: 0deg;\n  --hs-skew-x: 0deg;\n  --hs-skew-y: 0deg;\n  --hs-translate-ratio: 1;\n  --hs-scale-ratio: 0.2;\n  --hs-duration-ratio: 1;\n  --hs-translate-x-amount: 2rem;\n  --hs-translate-y-amount: 3rem;\n  --hs-flip-x-amount: 100deg;\n  --hs-flip-y-amount: -100deg;\n  --hs-perspective-amount: 2000px;\n  --hs-stagger-amount: 100ms;\n  --hs-skew-amount: 20deg;\n  --hs-reveal-amount: 100%;\n  --hs-blur: 0;\n  --hs-blur-amount: 8px;\n}\n```\n\n#### Responsive values in CSS\n\n```css\n:root {\n  --hs-duration: 0.4s;\n  --hs-easing: ease-in-out;\n  --hs-translate-x-amount: 2.5rem;\n}\n\n@media (min-width: 768px) {\n  :root {\n    --hs-duration: 0.6s;\n    --hs-easing: ease-in;\n    --hs-translate-x-amount: 4rem;\n  }\n}\n```\n\n## Plugin options\n\n### Options overview\n\n```js\n// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    'humblescroll-nuxt'\n  ],\n  humbleScroll: {\n    repeat: true,\n    mirror: true,\n    offset: {\n      bottom: -100, // 100px away from bottom of the screen\n      top: 0,\n      left: 0,\n      right: 0\n    }\n  }\n})\n```\n\n| Option           | Type      | Default                                    | Description                                                                 |\n| ---------------- | --------- | ------------------------------------------ | --------------------------------------------------------------------------- |\n| `root`           | `string`  | `null`                                     | Root container to observe                                                   |\n| `repeat`         | `boolean` | `false`                                    | Repeat the animation when scrolling from top                                |\n| `mirror`         | `boolean` | `false`                                    | Mirror the animation on leave                                               |\n| `threshold`      | `number`  | `0.1`                                      | Intersection threshold where 0.1 is 10% of the element                      |\n| `offset`         | `Offset`  | `{top: 0, right: 0, bottom: -40, left: 0}` | Intersection offset. Use negative numbers to make the observed area smaller |\n\n## Animations\n\n### 1. Fade animation\n\nFades in the element.\n\n```html\n\u003cHumbleScroll animation=\"fade\" /\u003e\n```\n\n### 2. Directional\n\nCustomize by overriding `--hs-translate-y-amount` or `--hs-translate-x-amount` in your css or directly on the element with the variables prop. Works like a slide without `fade` applied.\n\n```html\n\u003cHumbleScroll animation=\"up\" /\u003e\n\u003cHumbleScroll animation=\"down\" /\u003e\n\u003cHumbleScroll animation=\"left\" :variables=\"{ 'translate-x-amount': '42px' }\" /\u003e\n\u003cHumbleScroll animation=\"right\" :variables=\"{ 'translate-y-amount': '20rem' }\" /\u003e\n```\n\n### 3. Zoom\n\nCustomize by overriding `--hs-scale-ratio` in your css or directly on the element as inline-style.\n\n```html\n\u003cHumbleScroll animation=\"zoom-in\" /\u003e\n\u003cHumbleScroll animation=\"zoom-out\" :variables=\"{ 'scale-ratio': 0.6 }\" /\u003e\n```\n\n### 4. Flip\n\nFlip in any direction. Customize by overriding `--hs-flip-x-amount` and `--hs-flip-y-amount`.\n\n```html\n\u003cHumbleScroll animation=\"flip-up\" /\u003e\n\u003cHumbleScroll animation=\"flip-down\" /\u003e\n\u003cHumbleScroll animation=\"flip-left\" :variables=\"{ 'flip-x-amount': '180deg' }\" /\u003e\n\u003cHumbleScroll animation=\"flip-right\" :variables=\"{ 'flip-y-amount': '-180deg' }\" /\u003e\n```\n\n### 5. Skew\n\nCombine with blur to make them feel blazingly fast. Customize by overriding `--hs-skew-amount`.\n\n```html\n\u003cHumbleScroll animation=\"skew-up\" /\u003e\n\u003cHumbleScroll animation=\"skew-down\" /\u003e\n\u003cHumbleScroll animation=\"skew-left\" /\u003e\n\u003cHumbleScroll animation=\"skew-right\" :variables=\"{ 'skew-amount': '30deg' }\" /\u003e\n```\n\n### 6. Reveal\n\nParent has overflow hidden and child slides from 100% to 0. Cusomize by overriding `--hs-reveal-amount`.\n\n```html\n\u003cHumbleScroll animation=\"reveal-up\" /\u003e\n\u003cHumbleScroll animation=\"reveal-down\" /\u003e\n\u003cHumbleScroll animation=\"reveal-left\" /\u003e\n\u003cHumbleScroll animation=\"reveal-right\" :variables=\"{ 'reveal-amount': '50%' }\" /\u003e\n```\n\n### 7. Blur\n\nWho doesn't like motion blur? Customize by overriding `--hs-blur` on an element.\n\n```html\n\u003cHumbleScroll animation=\"blur\" /\u003e\n\u003cHumbleScroll animation=\"blur\" :variables=\"{ 'blur-amount': '40px' }\" /\u003e\n```\n\n### 8. Easings\n\nCustomize by overriding `--hs-ease`, `--hs-ease-in`, `--hs-ease-out` or `--hs-ease-out-back` or just create your own.\n\n```html\n\u003cHumbleScroll animation=\"fade up\" easing=\"ease-in\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" easing=\"ease-out\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" easing=\"ease-in-out\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" easing=\"ease-out-back\" /\u003e\n```\n\n### 9. Size variations\n\nDefault variation for the translation amount on directional animations (up, down, left, right).\nCustomize by overriding `--hs-translate-ratio`.\n\n```html\n\u003cHumbleScroll animation=\"fade up\" size=\"small\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" size=\"medium\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" /\u003e \u003c!-- default --\u003e\n\u003cHumbleScroll animation=\"fade up\" size=\"large\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" size=\"extra-large\" /\u003e\n```\n\n### 10. Speed variations\n\nDefault variation for animation durations (scales from `--hs-duration`).\n\n```html\n\u003cHumbleScroll animation=\"fade up\" speed=\"slow\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" speed=\"medium\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" /\u003e \u003c!-- default --\u003e\n\u003cHumbleScroll animation=\"fade up\" speed=\"fast\" /\u003e\n\u003cHumbleScroll animation=\"fade up\" speed=\"extra-fast\" /\u003e\n```\n\n### 11. Run once\n\nEnsure the animation only runs once - even with `repeat` and `mirror` enabled.\n\n```html\n\u003cHumbleScroll animation=\"fade up\" :once=\"true\" /\u003e\n```\n\n### 12. Responsive animations\n\nIn this responsive age developers need the ability to animate differently based on screen sizes. Use the tailwind prefix before animations to apply a media query.\n\n```html\n\u003cHumbleScroll animation=\"sm:fade lg:up\" /\u003e\n\u003cHumbleScroll animation=\"md:fade xl:down\" /\u003e\n\u003cHumbleScroll animation=\"lg:fade sm:left\" /\u003e\n\u003cHumbleScroll animation=\"xl:fade md:right\" /\u003e\n```\n\n### 13. Combine them\n\nCombine animations inside the `animation` prop (space seperated).\n  \n  ```html\n  \u003cHumbleScroll animation=\"fade up\" speed=\"slow\" /\u003e\n  \u003cHumbleScroll animation=\"fade up zoom-in\" size=\"large\" /\u003e\n  \u003cHumbleScroll animation=\"fade right flip-left blur\" /\u003e\n  \u003cHumbleScroll animation=\"skew-right fade right blur\" speed=\"fast\" easing=\"ease-out-back\" /\u003e\n  ```\n\n## Vue state\n\nUse the `v-slot` directive to access the `isIntersecting` state.\n\n```html  \n\u003cHumbleScroll v-slot=\"{ isIntersecting }\"\u003e\n  \u003cdiv \n    class=\"flex flex-col items-start justify-between px-8 py-8 transition-all duration-300 rounded-lg\"\n    :class=\"[isIntersecting ? 'bg-green-500 text-slate-800' : 'text-white bg-slate-800']\"  \n  \u003e\n    \u003cp class=\"text-2xl\"\u003e{{ isIntersecting ? 'Intersecting' : 'Not intersecting' }}\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/HumbleScroll\u003e\n```\n\nUse the `@intersecting` event to access the `isIntersecting` state.\n\n```html\n\u003cHumbleScroll @intersecting=\"alert('Hello World')\"\u003e\n  \u003cp\u003eRun your functionality when in screen\u003c/p\u003e\n\u003c/HumbleScroll\u003e\n```\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/humblescroll-nuxt/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/humblescroll-nuxt\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/humblescroll-nuxt.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/humblescroll-nuxt\n\n[license-src]: https://img.shields.io/npm/l/humblescroll-nuxt.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/humblescroll-nuxt\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasoxholm%2Fhumblescroll-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathiasoxholm%2Fhumblescroll-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasoxholm%2Fhumblescroll-nuxt/lists"}