Author: | ingram-projects |
---|---|
Views Total: | 819 views |
Official Page: | Go to website |
Last Update: | July 23, 2022 |
License: | MIT |
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.6.7 (07/23/2022)
- changed peer dependencies to allow a broader range of vue and react versions
v0.6.6 (01/12/2022)
- Note: Version bump only for package animxyz
v0.6.2/3/4/5 (06/23/2021)
- fixed bugs
v0.6.1 (06/23/2021)
- fixed StrictMode findDOMNode error with react transition group
v0.6.0 (06/22/2021)
- Bug Fixes
- Added official react integration
v0.5.0 (02/17/2021)
- added animation-direction utilities
v0.4.1 (02/09/2021)
- Bug Fixes
v0.4.0 (01/17/2021)
- Bug Fixes