{"id":13405844,"url":"https://github.com/ingram-projects/animxyz","last_synced_at":"2025-05-14T14:06:26.319Z","repository":{"id":39137573,"uuid":"261039653","full_name":"ingram-projects/animxyz","owner":"ingram-projects","description":"The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.","archived":false,"fork":false,"pushed_at":"2023-09-04T15:46:12.000Z","size":7395,"stargazers_count":2479,"open_issues_count":40,"forks_count":58,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-13T13:25:26.079Z","etag":null,"topics":["animation","animxyz","composable-animations","css","css-animations","css-framework","functional-css","react","scss","vue"],"latest_commit_sha":null,"homepage":"https://animxyz.com","language":"SCSS","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/ingram-projects.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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}},"created_at":"2020-05-03T23:22:04.000Z","updated_at":"2025-04-23T18:55:10.000Z","dependencies_parsed_at":"2024-01-08T08:09:29.481Z","dependency_job_id":null,"html_url":"https://github.com/ingram-projects/animxyz","commit_stats":{"total_commits":1053,"total_committers":3,"mean_commits":351.0,"dds":"0.32953466286799615","last_synced_commit":"0cdb9aba2a8cb1634cbfd074395fdafbfda3bc40"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingram-projects%2Fanimxyz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingram-projects%2Fanimxyz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingram-projects%2Fanimxyz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ingram-projects%2Fanimxyz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ingram-projects","download_url":"https://codeload.github.com/ingram-projects/animxyz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254159180,"owners_count":22024558,"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":["animation","animxyz","composable-animations","css","css-animations","css-framework","functional-css","react","scss","vue"],"created_at":"2024-07-30T19:02:13.516Z","updated_at":"2025-05-14T14:06:26.275Z","avatar_url":"https://github.com/ingram-projects.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://animxyz.com\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/ingram-projects/animxyz/master/docs/src/assets/images/animxyz-logo.svg\" alt=\"AnimXYZ Logo\" height=\"160\"\u003e\u003ca\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eAnimXYZ\u003c/h1\u003e\n\n[![npm version](https://badge.fury.io/js/%40animxyz%2Fcore.svg)](https://www.npmjs.com/package/@animxyz/core)\n\n[animxyz.com](https://animxyz.com)\n\nAnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.\n\nFor example here is how you make an element fade and shrink in from above:\n\n```html\n\u003cdiv class=\"xyz-in\" xyz=\"fade up big\"\u003eI will animate in!\u003c/div\u003e\n```\nChanging the class to `xyz-out` reverses the direction of the animation:\n\n```html\n\u003cdiv class=\"xyz-out\" xyz=\"fade up big\"\u003eI will animate out!\u003c/div\u003e\n```\n[See it in action here](\u003chttps://animxyz.com/docs?tab=examples\u0026example=Example 1#the-basics\u003e)\n\nFor simple animations, that's all you need, but AnimXYZ can do so much more! [Check out the AnimXYZ docs!](https://animxyz.com/docs)\n\n---\n## Installation\n\n### Using a package manager\n\nAnimXYZ can be installed using your favorite package manager:\n\n```bash\n# with npm\nnpm install @animxyz/core\n\n# with yarn\nyarn add @animxyz/core\n```\n\nAfter installation, you will need to import AnimXYZ into your project.\n\n#### Import into a Webpack project\nIf your Webpack project uses `css-loader` you can import the CSS by putting this snippet anywhere in your javascript code:\n\n```js\nimport '@animxyz/core'\n```\n\n#### Import into a SASS project\nAnimXYZ is built in SASS and provides useful functions and mixins for customization. Import it anywhere in your SASS code:\n\n```scss\n// Import the functions/mixins\n@import '@animxyz/core';\n\n// Add all the core/utilities selectors\n@include xyz-all;\n// --- Or for more control and granularity ---\n@include xyz-core;\n@include xyz-utilities;\n```\n\n---\n### Using jsDelivr\n\nTo add AnimXYZ using a CDN put this link in the `\u003chead\u003e` of your `index.html` file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@animxyz/core\"\u003e\n```\n\n---\n### Vue \u0026 React\n\n If you are using AnimXYZ in a Vue or React project we strongly recommend you also use our AnimXYZ components. To add those, follow the installation instructions in the relevant sections [Vue](https://animxyz.com/docs/#vue-installation) and [React](https://animxyz.com/docs/#react-installation).\n\n---\n## Made By\n\nMiles Ingram • [GitHub](https://github.com/milesingrams) • [Website](https://milesingram.me)\n\nMattan Ingram • [GitHub](https://github.com/mattaningram) • [Website](https://mattaningram.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fingram-projects%2Fanimxyz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fingram-projects%2Fanimxyz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fingram-projects%2Fanimxyz/lists"}