{"_id":"@dokja620/qwik-animate","_rev":"2-187a532d11ab242645e2da2495df0f71","name":"@dokja620/qwik-animate","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@dokja620/qwik-animate","version":"1.0.0","description":"An animated on-scroll library for QwikJS! With a vast array of animations, it seamlessly integrates with QwikJS, enabling effortless creation of captivating scroll-triggered effects.","main":"./lib/index.qwik.mjs","qwik":"./lib/index.qwik.mjs","types":"./lib-types/index.d.ts","keywords":["qwik","qwikjs","qwik-animate","animation","scroll-triggered","on-scroll","effects","animate.css","animation-library","scroll-animation","scroll-effects","interactive","playground","debugging","run-once","debug-mode","preset-animations"],"exports":{".":{"import":"./lib/index.qwik.mjs","require":"./lib/index.qwik.cjs","types":"./lib-types/index.d.ts"}},"engines":{"node":"^18.17.0 || ^20.3.0 || >=21.0.0"},"private":false,"type":"module","scripts":{"build":"qwik build","build.lib":"vite build --mode lib","build.types":"tsc --emitDeclarationOnly","dev":"vite --mode ssr","dev.debug":"node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force","fmt":"prettier --write .","fmt.check":"prettier --check .","lint":"eslint \"src/**/*.ts*\"","release":"np","start":"vite --open --mode ssr","test":"echo \"No test specified\" && exit 0","qwik":"qwik"},"devDependencies":{"@builder.io/qwik":"1.5.4","@types/eslint":"^8.56.10","@types/node":"^20.12.7","@typescript-eslint/eslint-plugin":"^7.7.1","@typescript-eslint/parser":"^7.7.1","eslint":"^8.57.0","eslint-plugin-qwik":"latest","np":"^8.0.4","prettier":"^3.2.5","typescript":"5.4.5","undici":"*","vite":"^5.2.10","vite-tsconfig-paths":"^4.2.1"},"_id":"@dokja620/qwik-animate@1.0.0","gitHead":"b778eebc72a1d8a29972e43c36664d8e9d415133","_nodeVersion":"20.12.0","_npmVersion":"10.5.0","dist":{"integrity":"sha512-tgaLUSgxR1+GFkzWbTinlh+5UzY8vXXIzMoxr2mys7DuncFwxxppA6K2qpBGB8tU/ISbKiczBHenQSWSICThdw==","shasum":"401b24f4ed8d12be611c3409c9f72039994b9b25","tarball":"https://registry.npmjs.org/@dokja620/qwik-animate/-/qwik-animate-1.0.0.tgz","fileCount":9,"unpackedSize":64456,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHA4Cq3s+XHVpYdsYdSVhWJjffqt5YoReYK3CJWdVj0AiBH+9U61QrKmjI+OW7M6+YJOMDqWk7LJJtvjdU4QKhpsw=="}]},"_npmUser":{"name":"dokja620","email":"revanamike620@gmail.com"},"directories":{},"maintainers":[{"name":"dokja620","email":"revanamike620@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/qwik-animate_1.0.0_1716103441074_0.3563338656665438"},"_hasShrinkwrap":false},"1.1.0":{"name":"@dokja620/qwik-animate","version":"1.1.0","description":"An animated on-scroll library for QwikJS! With a vast array of animations, it seamlessly integrates with QwikJS, enabling effortless creation of captivating scroll-triggered effects.","main":"./lib/index.qwik.mjs","qwik":"./lib/index.qwik.mjs","types":"./lib-types/index.d.ts","keywords":["qwik","qwikjs","qwik-animate","animation","scroll-triggered","on-scroll","effects","animate.css","animation-library","scroll-animation","scroll-effects","interactive","playground","debugging","run-once","debug-mode","preset-animations"],"exports":{".":{"import":"./lib/index.qwik.mjs","require":"./lib/index.qwik.cjs","types":"./lib-types/index.d.ts"}},"engines":{"node":"^18.17.0 || ^20.3.0 || >=21.0.0"},"private":false,"type":"module","scripts":{"build":"qwik build","build.lib":"vite build --mode lib","build.types":"tsc --emitDeclarationOnly","dev":"vite --mode ssr","dev.debug":"node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force","fmt":"prettier --write .","fmt.check":"prettier --check .","lint":"eslint \"src/**/*.ts*\"","release":"np","start":"vite --open --mode ssr","test":"echo \"No test specified\" && exit 0","qwik":"qwik"},"devDependencies":{"@builder.io/qwik":"1.5.4","@types/eslint":"^8.56.10","@types/node":"^20.12.7","@typescript-eslint/eslint-plugin":"^7.7.1","@typescript-eslint/parser":"^7.7.1","eslint":"^8.57.0","eslint-plugin-qwik":"latest","np":"^8.0.4","prettier":"^3.2.5","typescript":"5.4.5","undici":"*","vite":"^5.2.10","vite-tsconfig-paths":"^4.2.1"},"_id":"@dokja620/qwik-animate@1.1.0","gitHead":"a02334229d97ab48df5863079c1a31df8bec6553","_nodeVersion":"20.12.0","_npmVersion":"10.5.0","dist":{"integrity":"sha512-FzsDmrHSJkbHQFTTriuKGSSln1bNc0f08PD+rZY7F0gLETk6mzrqzwPcXTOdXNTFpx4uvhokr4s6CCwN3USMdg==","shasum":"d9c3ca78f132f498c3c6951096ca2d8a6ee34204","tarball":"https://registry.npmjs.org/@dokja620/qwik-animate/-/qwik-animate-1.1.0.tgz","fileCount":9,"unpackedSize":64875,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxy1Wce0M+O5IyIX+EOHWicsiRMTQBKCa7Veasadm/jgIhAKxF+0Fzuwbkb4la8PYKdEkwYp2+7cn37F8j+wZU+Jv1"}]},"_npmUser":{"name":"dokja620","email":"revanamike620@gmail.com"},"directories":{},"maintainers":[{"name":"dokja620","email":"revanamike620@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/qwik-animate_1.1.0_1716121123569_0.010731045000296868"},"_hasShrinkwrap":false},"1.1.1":{"name":"@dokja620/qwik-animate","version":"1.1.1","description":"An animated on-scroll library for QwikJS! With a vast array of animations, it seamlessly integrates with QwikJS, enabling effortless creation of captivating scroll-triggered effects.","main":"./lib/index.qwik.mjs","qwik":"./lib/index.qwik.mjs","types":"./lib-types/index.d.ts","keywords":["qwik","qwikjs","qwik-animate","animation","scroll-triggered","on-scroll","effects","animate.css","animation-library","scroll-animation","scroll-effects","interactive","playground","debugging","run-once","debug-mode","preset-animations"],"exports":{".":{"import":"./lib/index.qwik.mjs","require":"./lib/index.qwik.cjs","types":"./lib-types/index.d.ts"}},"engines":{"node":"^18.17.0 || ^20.3.0 || >=21.0.0"},"private":false,"type":"module","scripts":{"build":"qwik build","build.lib":"vite build --mode lib","build.types":"tsc --emitDeclarationOnly","dev":"vite --mode ssr","dev.debug":"node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force","fmt":"prettier --write .","fmt.check":"prettier --check .","lint":"eslint \"src/**/*.ts*\"","release":"np","start":"vite --open --mode ssr","test":"echo \"No test specified\" && exit 0","qwik":"qwik"},"devDependencies":{"@builder.io/qwik":"1.5.4","@types/eslint":"^8.56.10","@types/node":"^20.12.7","@typescript-eslint/eslint-plugin":"^7.7.1","@typescript-eslint/parser":"^7.7.1","eslint":"^8.57.0","eslint-plugin-qwik":"latest","np":"^8.0.4","prettier":"^3.2.5","typescript":"5.4.5","undici":"*","vite":"^5.2.10","vite-tsconfig-paths":"^4.2.1"},"_id":"@dokja620/qwik-animate@1.1.1","gitHead":"b31c8bcdf9560ce3cb332f5277a1e405bd327ac7","_nodeVersion":"20.12.0","_npmVersion":"10.5.0","dist":{"integrity":"sha512-i2RmnPbJZ64xViGs/Mf5tzDn+R5fntCgvbQrXDnSpACnNwoZHJtjO+aczMb45rvZyu7U2gbz1PhZBkbtREPNLg==","shasum":"2d40fb60e2b8d3ca79285857433a15f9cc1ceda4","tarball":"https://registry.npmjs.org/@dokja620/qwik-animate/-/qwik-animate-1.1.1.tgz","fileCount":9,"unpackedSize":65970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFSoxytPCNx//GUvTIKsFL/q5nM8C2otT9BPvrvcmJ7qAiB8FjBnhLo4ngK2kZ9Uw/Zp3fLp2rNS+vsnsl5CSNqhqQ=="}]},"_npmUser":{"name":"dokja620","email":"revanamike620@gmail.com"},"directories":{},"maintainers":[{"name":"dokja620","email":"revanamike620@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/qwik-animate_1.1.1_1716121482159_0.543431025858206"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-19T07:24:00.999Z","1.0.0":"2024-05-19T07:24:01.284Z","modified":"2024-05-19T12:24:42.521Z","1.1.0":"2024-05-19T12:18:43.762Z","1.1.1":"2024-05-19T12:24:42.359Z"},"maintainers":[{"name":"dokja620","email":"revanamike620@gmail.com"}],"description":"An animated on-scroll library for QwikJS! With a vast array of animations, it seamlessly integrates with QwikJS, enabling effortless creation of captivating scroll-triggered effects.","keywords":["qwik","qwikjs","qwik-animate","animation","scroll-triggered","on-scroll","effects","animate.css","animation-library","scroll-animation","scroll-effects","interactive","playground","debugging","run-once","debug-mode","preset-animations"],"readme":" \r\n
\r\n \r\n
\r\n \r\n\r\n---\r\nIntroducing **QwikAnimate**: š An animated on-scroll library for QwikJS! With a vast array of animations, it seamlessly integrates with QwikJS, enabling effortless creation of captivating scroll-triggered effects. š«\r\n\r\n## Features\r\n- **Run Once**: Ensure animations run only once when the element first comes into view.\r\n- **Debug Mode**: Enable console logs for debugging purposes.\r\n- **Threshold Control**: Customize when animations start and stop based on the scroll position.\r\n- **Animation Preset File**: Includes `animate.css` with a variety of predefined animations.\r\n- **Interactive Playground**: Explore animations in real-time with our interactive playground at [qwikanimate.css](https://qwikanimate.css).\r\n\r\n## Installation š\r\nInstall QwikAnimate in your project using npm:\r\n\r\n```sh\r\ncd my-project\r\n\r\nnpm install @dokja620/qwik-animate\r\n```\r\n\r\n## Usage Example\r\nHere's a basic example to get you started with QwikAnimate:\r\n\r\n### Example Usage in a component\r\nIn the Qwik component where you want to use the `Animate` component, import it and use it as shown below:\r\n\r\n```tsx\r\nimport { Animate } from \"~/components/qwik-animate/animate\";\r\n\r\nexport default function MyComponent() {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n### Run Once\r\nThe `runOnce` prop ensures that the animation runs only once when the element first comes into view.\r\n\r\n```tsx\r\n\r\n \r\n\r\n```\r\n\r\n### Debug Mode\r\nThe `debug` prop allows you to enable console logs for debugging purposes.\r\n\r\n```tsx\r\n\r\n \r\n\r\n```\r\n\r\n### Threshold Control\r\nThe `threshold` prop allows you to customize when animations start and stop based on the scroll position. The threshold values can be adjusted to control the intersection ratio for showing and hiding the animation.\r\nIn short:\r\n`threshold`=\"`show threshold`, `hide threshold`\"\r\n\r\n```tsx\r\n\r\n \r\n\r\n```\r\n\r\n## animate.css: Elevate Your Animations\r\n\r\nWith animate.css, Qwik Animate brings a powerhouse of animation possibilities to your fingertips:\r\n\r\n### Seamless Chaining\r\n\r\nBlend animations effortlessly for captivating effects that keep your audience engaged.\r\n\r\n### Infinite Creativity\r\n\r\nExperiment with a variety of animations to craft the perfect visual narrative for your content.\r\n\r\n### Interactive Playground\r\n\r\nExplore animations in real-time with our interactive playground at [qwikanimate.css](https://qwikanimate.css).\r\n\r\n### Embrace Innovation\r\n\r\nJoin us in embracing innovation to create immersive user experiences.\r\n\r\n### Start Your Journey\r\n\r\nElevate your animations with animate.css and Qwik Animate. Explore now!\r\n\r\n## Credits\r\nš Credit is due to @w4u-public/A.css for creating an exceptionally comprehensive CSS animation generator. His remarkable work, crafted single-handedly, deserves wider recognition for its innovation and utility.\r\n\r\n## License\r\n[MIT](https://choosealicense.com/licenses/mit/)","readmeFilename":"README.md"}
![\"Qwik](\"https://github.com/Dokja620/qwik-animate/raw/master/logo.webp\"){kind=logo}
\r\n