- Notifications
You must be signed in to change notification settings - Fork62
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
License
ingram-projects/animxyz
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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:
<divclass="xyz-in"xyz="fade up big">I will animate in!</div>
Changing the class toxyz-out reverses the direction of the animation:
<divclass="xyz-out"xyz="fade up big">I will animate out!</div>
For simple animations, that's all you need, but AnimXYZ can do so much more!Check out the AnimXYZ docs!
AnimXYZ can be installed using your favorite package manager:
# with npmnpm install @animxyz/core# with yarnyarn add @animxyz/core
After installation, you will need to import AnimXYZ into your project.
If your Webpack project usescss-loader you can import the CSS by putting this snippet anywhere in your javascript code:
import'@animxyz/core'
AnimXYZ is built in SASS and provides useful functions and mixins for customization. Import it anywhere in your SASS code:
// Import the functions/mixins@import'@animxyz/core';// Add all the core/utilities selectors@includexyz-all;// --- Or for more control and granularity ---@includexyz-core;@includexyz-utilities;
To add AnimXYZ using a CDN put this link in the<head> of yourindex.html file:
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@animxyz/core">
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 sectionsVue andReact.
About
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Contributors3
Uh oh!
There was an error while loading.Please reload this page.