Customizable Smooth CSS Animation Library – AnimXYZ

Preview:

Description:

AnimXYZ is a lightweight, fast, performant, customizable, and utility-first CSS3 animation library for HTML, Vue, and React.

How to use it:

1. Install and import the AnimXYZ.

# Yarn
$ yarn add @animxyz/core

# NPM
$ npm i @animxyz/core

// Core
@import '@animxyz/core';
// All In One
@include xyz-all;
// Or
@include xyz-core;
@include xyz-utilities;

2. Or import the stylesheet from a CDN.

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

3. Determine if to animate in or animate out the element using the xyz-in & xyz-out classes.

<div class="xyz-in">
  Animate in
</div>
<div class="xyz-out">
  Animate Out
</div>

4. Apply an animation of your choice to the element and config the animation using the xyz attribute:

<div xyz="fade up-100% flip-down flip-right-50% rotate-left-100% origin-bottom duration-10 stagger">
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
</div>

5. Possible configuration options.

// fade
<div xyz="fade-25% down-5 stagger">
  <div class="xyz-out"></div>
  <div class="xyz-out"></div>
  <div class="xyz-out"></div>
</div>
// translate
<div xyz="fade-25% down-5 stagger origin-bottom-left left-2 front-5">
  <div class="xyz-out"></div>
  <div class="xyz-out"></div>
  <div class="xyz-out"></div>
</div>
// rotate
<div xyz="fade-25% down-5 stagger origin-bottom-left left-2 front-5 flip-down-75%">
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
</div>
// scale
<div
  xyz="fade-25% down-5 stagger big-5 short-5 thin-50%">
  <div class="xyz-out"></div>
  <div class="xyz-out"></div>
  <div class="xyz-out"></div>
</div>
// skew
<div xyz="fade-25% down-5 stagger skew-right-2">
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
</div>
// perspective
<div xyz="fade-25% down-5 stagger perspective-2">
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
</div>
// timing (duration)
<div xyz="fade-25% down-5 stagger duration-6"
>
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
</div>
// easing
<div xyz="fade-25% down-5 stagger ease-out">
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
  <div class="xyz-in"></div>
</div>

5. Refer to https://animxyz.com/#sandbox for more details & examples.

Changelog:

v0.4.0 (01/17/2021)

• Bug Fixes