CSS animation toolkit AnimXYZ for HTML React and Vue
What is AnimXYZ?
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.
Preview of AnimXYZ
What are the Features of AnimXYZ?
Composable
Making an animation is as simple as describing it in words. Combine a fade with a scale and drop it from the top! xyz="fade small up"
Customizable
Out-of-the-box utilities not enough? Fine-tune any animation with CSS variables to your heart's content. Simple as: --xyz-translate-y: 42%;
Plug & Play
Works with HTML and CSS, or use our Vue and React integrations for even more power.
Nest & Stagger
Stagger lists of elements in both forward and reverse order, while animating nested items in sync with their parents.
Less Code
Powerful CSS animations without custom keyframes for every subtle animation need. Less fuss = more fun.
Performant
Silky smooth animations out of the box. Only 2.68kB
for base functionality and 11.4kB
if you include convenient utilities.
Conclusion
I have tested this library and it does not seem to work as easily as expressed in the documentation, i can get the animate in text to work, but the spinning elements and all that kind of stuff do not seem to work out of the box (which is annoying as the animations look really nice)
You can have a look at more examples on the sandbox version of AnimXYZ this, but getting them working is not as easy as just copying the html and including the script.
CSS animation toolkit AnimXYZ for HTML React and Vue Demo
View Demo Full Screen View Demo New Tab
CSS animation toolkit AnimXYZ for HTML React and Vue Code
HTML
<div class="item-group" xyz="fade">
<div class="square xyz-in"></div>
<div class="square xyz-in"></div>
<div class="square xyz-in"></div>
</div>
<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>
<div class="square xyz-in" xyz="duration-20 ease-in-out-back flip-up-100% iterate-infinite"></div>
Scripts
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">
External Link for CSS animation toolkit AnimXYZ for HTML React and Vue