Vuenimate

Elevate your Vue applications with vuenimate, a carefully crafted library of Vue animation components. Enhance user interfaces with fluid, engaging animations that are easy to integrate and customize.

Features

- Seamless Integration: Works out-of-the-box with any Vue project.
- Customizable: Extensive configuration options for each animation.
- Performance Optimized: Ensures smooth animations for a responsive UI.
- Diverse Animation Set: Choose from a wide range of animation types.
- Reactive & Controllable: Animations respond dynamically to user interactions.

Installation

Install 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.

`

`

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.

`

`

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
};
``

You can set the keyframes values as you would set it when using the Browser Web Animations API.

Contributing

Contributions to vuenimate are welcome! Please read our contributing guide for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

- Vue community
- Contributors and maintainers of vuenimate