{"id":24475571,"url":"https://github.com/nassiry/cartflow","last_synced_at":"2025-10-23T19:06:43.427Z","repository":{"id":272401177,"uuid":"916463231","full_name":"nassiry/cartflow","owner":"nassiry","description":"CartFlow is a lightweight, modern JavaScript library to animate items moving to a shopping cart.","archived":false,"fork":false,"pushed_at":"2025-04-28T04:57:38.000Z","size":117,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-17T22:26:24.949Z","etag":null,"topics":["add-to-cart","cart-animation","cartflow","customizable-options","ecommerce-store","fly-to-cart","fly-to-cart-animation","fly-to-element","frontend-development","shopping-cart","shopping-cart-solution","typescript-add-to-cart-animation"],"latest_commit_sha":null,"homepage":"https://github.com/nassiry/cartflow","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/nassiry.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"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,"zenodo":null}},"created_at":"2025-01-14T06:27:22.000Z","updated_at":"2025-06-05T15:53:05.000Z","dependencies_parsed_at":"2025-01-14T07:43:01.686Z","dependency_job_id":"c87df3dd-18d5-4aaf-accb-e9663835e18a","html_url":"https://github.com/nassiry/cartflow","commit_stats":null,"previous_names":["nassiry/cartflow"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/nassiry/cartflow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassiry%2Fcartflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassiry%2Fcartflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassiry%2Fcartflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassiry%2Fcartflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nassiry","download_url":"https://codeload.github.com/nassiry/cartflow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nassiry%2Fcartflow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280675605,"owners_count":26371566,"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","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["add-to-cart","cart-animation","cartflow","customizable-options","ecommerce-store","fly-to-cart","fly-to-cart-animation","fly-to-element","frontend-development","shopping-cart","shopping-cart-solution","typescript-add-to-cart-animation"],"created_at":"2025-01-21T09:15:16.442Z","updated_at":"2025-10-23T19:06:43.382Z","avatar_url":"https://github.com/nassiry.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# CartFlow\n\n[![Project Showcase](https://img.shields.io/badge/See-Showcase-8A2BE2)](SHOWCASE.md)\n[![Live Demo](https://img.shields.io/badge/demo-online-green?logo=github)](https://nassiry.github.io/cartflow/)\n![Minified Size](https://img.shields.io/bundlephobia/min/cartflow)\n![TypeScript Supported](https://img.shields.io/badge/TypeScript-Supported-3178C6?logo=typescript\u0026logoColor=white)\n![Total Downloads](https://img.shields.io/npm/dt/cartflow.svg)\n![npm version](https://img.shields.io/npm/v/cartflow.svg)\n![License](https://img.shields.io/npm/l/cartflow.svg)\n\n\u003c/div\u003e\n\n\n**CartFlow** is a lightweight, modern JavaScript library to animate items moving to a shopping cart. It supports Node.js, browser environments, and UMD/ES module formats.\n\n- ✨ Smooth \"Add to Cart\" animations\n- 🔈 Optional sound effect support\n- 🛒 Optional cart \"shake\" effect\n- ⚙️ Fully customizable via configuration options\n- 🌍 Works in modern browsers and Node.js\n- 📚 Typed API for great IDE experience (TypeScript definitions included)\n- ⚡ Uses GSAP if available, otherwise falls back gracefully\n\n## Table Of Contents\n\n1. [Installation](#installation)\n    - [Install with npm](#1-install-with-npm)\n    - [Using a `\u003cscript\u003e` tag (for browsers)](#2-using-a-script-tag-for-browsers)\n2. [Demo](#demo)\n3. [Usage](#usage)\n    - [In Node.js / TypeScript / ESM](#1-nodejs-commonjs--typescript)\n    - [Quick Example](#2-quick-example)\n4. [Configuration Options](#configuration-options)\n5. [Browser \u0026 Nodejs Compatibility](#browser--nodejs-compatibility)\n6. [Built With Cartflow.js](#built-with-cartflowjs)\n7. [Contributing](#contributing)\n8. [Changelog](#changelog)\n9. [License](#license)\n\n## Installation\n- ### 1. Install with npm:\n\n```bash\nnpm install cartflow\n```\n\n- ### 2. Using a `\u003cscript\u003e` tag (for browsers):\n\n```html\n\u003cscript src=\"https://unpkg.com/cartflow\"\u003e\u003c/script\u003e\n```\n\u003e Or use your own hosted file if needed: `\u003cscript src=\"dist/CartFlow.js\"\u003e\u003c/script\u003e`.\n\n## Demo\n\nSee CartFlow in action here: [Live Demo](https://nassiry.github.io/cartflow/)\n\u003e  Try adding items to the cart and watch the smooth animation!\n\n## Usage\n\n- ### 1.  In Node.js / TypeScript / ESM\n\n```javascript\n// CommonJS (Node.js)\nconst CartFlow = require('cartflow');\n\n// ES Module or TypeScript\nimport CartFlow from 'cartflow';\n```\n\n- ### 2. Quick Example\n\n```javascript\nconst animation = new CartFlow({\n    cartSelector: \".shopping-cart\",\n    buttonSelector: \".add-to-cart\",\n    onComplete: (item) =\u003e {\n        console.log(\"Item successfully animated to the cart!\", item);\n    },\n    onCartShake: (cart) =\u003e {\n        console.log(\"Cart shake effect completed!\", cart);\n    },\n    soundEffect: \"click-sound.mp3\",\n  });\n```\n\n## Configuration Options\n\n| Option  | Type | Default | Description |\n| ------------- | ------------- | -------- | ------ |\n| `cartSelector`  | `string`  | `.shopping-cart` | CSS selector for the shopping cart element. |\n| `buttonSelector` | `string` | `.add-to-cart` | CSS selector for the \"Add to Cart\" buttons. |\n| `itemSelector` | `string` | `.item` | CSS selector for the item container. |\n| `imageSelector` | `string` | `img` | CSS selector for the item's image.|\n| `animationDuration` | `number` | `1000` | Duration of the animation in milliseconds. |\n| `easing` | `string` | `ease-in-out` | Easing function for the animation. |\n| `shakeEffect` | `boolean` | `true` | Enable or disable the cart shake effect. | \n| `soundEffect` | `string or Audio` | `null` | URL or Audio object for a sound effect. |\n| `onComplete` | `function` | `null` | Callback function after the animation completes, receives the affected item element. |\n| `onCartShake` | `function` | `null` | Callback function after the cart shake effect, receives the cart element. |\n\n### Browser \u0026 Nodejs Compatibility\n\nChrome | Firefox | Safari | Opera | Edge | Nodejs\n--- | --- | --- | --- | --- | --- |\nLatest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔\n\n## Built With Cartflow.js\n\nSee how others are using this library in our [SHOWCASE.md](SHOWCASE.md).\n\n_Using this library? [Add your project](SHOWCASE.md)_\n\n## Contributing\n\nWe welcome contributions! Please read the [Contributions Guid](CONTRIBUTING.md) to get started.\n\n## Changelog\n\nSee [Changelog](CHANGELOG.md) for full release history and version details.\n\n## License\nThis package is open-source software licensed under the [MIT license](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnassiry%2Fcartflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnassiry%2Fcartflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnassiry%2Fcartflow/lists"}