AnimXYZ is a powerful tool designed to help you create, customize, and compose animations for your website with ease. Utilizing CSS variables, it allows for a virtually limitless number of unique animations without the need to write a single keyframe. This means you save time while having complete control over how your elements move. Tailored for Vue, React, SCSS, and CSS, AnimXYZ will undoubtedly bring your website to life.
Getting Started with AnimXYZ
To give you a taste of its simplicity, let’s explore how to make an element fade and shrink in from above:
<div class="xyz-in" xyz="fade up big">
I will animate in!
</div>
<div class="xyz-out" xyz="fade up big">
I will animate out!
</div>By changing the class to “xyz-out,” you can reverse the direction of the animation. For more visual examples, see it in action here.
Installation
Using a Package Manager
You can easily install AnimXYZ using your favorite package manager:
- With npm:
npm install @animxyz/core - With yarn:
yarn add @animxyz/core
Importing AnimXYZ
For a Webpack Project
If your Webpack project uses css-loader, you can import the CSS by adding this snippet anywhere in your JavaScript code:
import '@animxyz/core';For a SASS Project
As AnimXYZ is built in SASS, it provides useful functions and mixins for customization. Simply import it anywhere in your SASS code:
@import '@animxyz/core';
@include xyz-all; // Add all core utilities selectors
// For more control and granularity
@include xyz-core;
@include xyz-utilities;Using jsDelivr
To add AnimXYZ via a CDN, include this link in the head of your index.html file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">Integrating with Vue and React
If you’re developing a project in Vue or React, we highly recommend using our AnimXYZ components. Installation instructions are detailed in these sections for Vue and React.
Troubleshooting Tips
- If animations are not displaying correctly, ensure your classes are correctly set and that you are importing AnimXYZ properly.
- Double-check compatibility with your project framework. Make sure all required dependencies are installed.
- For specific issues related to your setup, make sure to consult the AnimXYZ documentation.
- For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.