Customizable Smooth CSS Animation Library

Customizable Smooth CSS Animation Library

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.

AnimXYZ

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:

<div class="xyz-in" xyz="fade up big">I will animate in!</div>

Changing the class to xyz-out reverses the direction of the animation:

<div class="xyz-out" xyz="fade up big">I will animate out!</div>

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!


Installation

Using a package manager

AnimXYZ can be installed using your favorite package manager:

# 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:

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:

// 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 <head> of your index.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/[email protected]/dist/animxyz.min.css">

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 and React.


Made By

Miles Ingram • GitHubWebsite

Mattan Ingram • GitHubWebsite

Download Details:

Author: ingram-projects

Demo: https://animxyz.com/

Source Code: https://github.com/ingram-projects/animxyz

css javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Slideshow with HTML, CSS, and JavaScript / How to Create a Slideshow with HTML, CSS, and JavaScript

In this tutorial, we will build a Slideshow of the Social Media Icons with HTML, CSS, and JavaScript

Image slider in HTML, CSS and, JavaScript || Carousel in HTML, CSS, and, JavaScript

Create a simple and responsive image slider or carousel using HTML, CSS, and javaScript.

Calendar with HTML, CSS, and JavaScript - How to build calendar using HTML, CSS, and JavaScript

In this tutorial, we will build a Calendar with HTML, CSS, and JavaScript

Slideshow with HTML, CSS, and JavaScript / How to create Slideshow using HTML, CSS, and JavaScript

In this tutorial, you will learn about how to build a cool Slideshow using HTML, CSS, and JavaScript