Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ingram-projects/animxyz
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
https://github.com/ingram-projects/animxyz
animation animxyz composable-animations css css-animations css-framework functional-css react scss vue
Last synced: about 2 hours ago
JSON representation
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
- Host: GitHub
- URL: https://github.com/ingram-projects/animxyz
- Owner: ingram-projects
- License: mit
- Created: 2020-05-03T23:22:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-04T15:46:12.000Z (over 1 year ago)
- Last Synced: 2024-10-29T15:34:10.396Z (3 months ago)
- Topics: animation, animxyz, composable-animations, css, css-animations, css-framework, functional-css, react, scss, vue
- Language: SCSS
- Homepage: https://animxyz.com
- Size: 7.05 MB
- Stars: 2,423
- Watchers: 24
- Forks: 56
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
AnimXYZ
[](https://www.npmjs.com/package/@animxyz/core)
[animxyz.com](https://animxyz.com)
AnimXYZ 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.
For example here is how you make an element fade and shrink in from above:
```html
I will animate in!
```
Changing the class to `xyz-out` reverses the direction of the animation:
```html
I will animate out!
```
[See it in action here]()
For simple animations, that's all you need, but AnimXYZ can do so much more! [Check out the AnimXYZ docs!](https://animxyz.com/docs)
---
## Installation
### Using a package manager
AnimXYZ can be installed using your favorite package manager:
```bash
# with npm
npm install @animxyz/core
# with yarn
yarn add @animxyz/core
```
After installation, you will need to import AnimXYZ into your project.
#### Import into a Webpack project
If your Webpack project uses `css-loader` you can import the CSS by putting this snippet anywhere in your javascript code:
```js
import '@animxyz/core'
```
#### Import into a SASS project
AnimXYZ is built in SASS and provides useful functions and mixins for customization. Import it anywhere in your SASS code:
```scss
// Import the functions/mixins
@import '@animxyz/core';
// Add all the core/utilities selectors
@include xyz-all;
// --- Or for more control and granularity ---
@include xyz-core;
@include xyz-utilities;
```
---
### Using jsDelivr
To add AnimXYZ using a CDN put this link in the `` of your `index.html` file:
```html
```
---
### Vue & React
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).
---
## Made By
Miles Ingram • [GitHub](https://github.com/milesingrams) • [Website](https://milesingram.me)
Mattan Ingram • [GitHub](https://github.com/mattaningram) • [Website](https://mattaningram.com)
