A Lightweight and Versatile Vue Animation Library
npm install vuenimatevuenimate, a carefully crafted library of Vue animation components. Enhance user interfaces with fluid, engaging animations that are easy to integrate and customize.
vuenimate using npm:
bash
npm install vuenimate
`
Usage
Import and use vuenimate in your Vue components:
`
`
You can also specify animation properties with the config prop.
`
`
Using triggers you can specify when do you want your animation to start, the default trigger is on mount.
`
//This animation will start when we click firstElementChild (in this case, hero-section)
`
You can start an animation when you scroll to the element and it is visible on the page using on-scroll-to-element. You can specify the threshold which indicate how much of the element should be visible to start animation.
`
//hero-section will fade in when 0.3 of it is visible on scroll
`
API Reference
Below are some of the components available in vuenimate (more animations coming soon):
`
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
(Coming Soon)
`
##### Props:
config: a configuration object with basic css animation properties.
`
//config object for component, each component has its config object
config = {
duration: 1000, //animation duration in ms
delay: 0, //animation delay in ms
easing: "ease-out", //animation easing type
iterations: 1, // animation number of iteration
fill: "forwards", //animation fill type
offset: 20, // this is the number of pixels to move
};
`
`
// Similar structure as above for each component
`
##### Events:
animation-ended: Emitted when the animation is complete. This is true to all animations.
##### Triggers:
`
on-click
on-double-click
on-right-click
on-mouse-down
on-mouse-up
on-mouse-move
on-mouse-over
on-mouse-out
on-mouse-enter
on-mouse-leave
on-touch-start
on-touch-move
on-touch-end
on-touch-cancel
on-focus
on-blur
on-key-press
on-key-down
on-key-up
on-scroll
on-drag
on-drag-start
on-drag-end
on-drag-enter
on-drag-leave
on-drag-over
on-drop
on-change
on-input
on-submit
on-resize
on-wheel
on-scroll-to-element
`
##### Customization:
You can use the component to make different types of custom animations. The VaBase component has a keyframes property in its config prop, you can set it to whatever animation you want to make.
`
config = {
duration: 1000,
delay: 0,
easing: "ease",
iterations: 1,
fill: "forwards",
keyframes: [
{ transform: "translateY(0)", opacity: 1 },
{ transform: "translateY(-100%)", opacity: 0 },
], //CSS keyframes Array
};
``