Press "Enter" to skip to content

Create and Customize Animations for Website | AnimXYZ

AnimXYZ helps you create, customize, and create animations for your website. Powered by CSS Variables to allow an almost unlimited number of unique animations without writing a single keyframe.

How to make use of 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 aspect utilizing 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 option to the aspect and config the animation utilizing 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>

Customizable Smooth CSS Animation Library, AnimXYZ Plugin/Github


See Demo And Download

Official Website(ingram-projects): Click Here

This superior jQuery/javascript plugin is developed by ingram-projects. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *