https://github.com/svenwesterlaken/vue-wavify
🌊 Animated wave component for Vue (using svg & javascript to animate it) - tested with Nuxt.
https://github.com/svenwesterlaken/vue-wavify
animated animation component configurable javascript js svg svg-animations vue vue-component wave wavify
Last synced: about 2 months ago
JSON representation
🌊 Animated wave component for Vue (using svg & javascript to animate it) - tested with Nuxt.
- Host: GitHub
- URL: https://github.com/svenwesterlaken/vue-wavify
- Owner: SvenWesterlaken
- License: mit
- Created: 2021-01-28T20:58:35.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-18T20:49:15.000Z (almost 3 years ago)
- Last Synced: 2025-02-23T22:01:45.589Z (about 2 months ago)
- Topics: animated, animation, component, configurable, javascript, js, svg, svg-animations, vue, vue-component, wave, wavify
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-wavify
- Size: 3.51 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Wavify
[](https://www.npmjs.com/package/vue-wavify)
[](https://www.npmjs.com/package/vue-wavify)
[](https://github.com/SvenWesterlaken/vue-wavify/blob/main/LICENSE)
> A single Vue component to create and adjust an animated wave using svg & javascript.
# Installation
**Yarn**
yarn add vue-wavify
**npm**
npm install vue-wavify
# Usage
The package can be imported globally or locally.
**Locally (single file component)**
```vue
import VueWavify from 'vue-wavify';
export default {
components: { VueWavify }
});
```
**Globally**
```js
import Vue from 'vue';
import VueWavify from 'vue-wavify';
Vue.use(VueWavify);
// Or
Vue.component('vue-wavify', VueWavify);
```
# Props
In order the configure the wave, the following props can be applied:
| prop | default | type | description |
| ----------- |:-------:|:---------:|:----------- |
| `paused` | `false` | `Boolean` | Pauses the animation |
| `points` | `3` | `Number` | Amount of points used to form the wave |
| `speed` | `0.15` | `Number` | Speed that the wave animation plays at |
| `height` | `20` | `Number` | Height of the wave relative to the SVG element |
| `amplitude` | `20` | `Number` | Amplitude of the rendered wave |
| `fill` | `blue` | `String` | Color of the wave (can be anything that a SVG path accepts) |
**Note:** Props that are not mentiond above will be passed on to the path element (instead of the container). Except for `id` & `style` attribute, these will be added to the container.
# Configuring the SVG
It is possible to configure and style the svg more precisely by using the default [slot](https://vuejs.org/v2/guide/components-slots.html).
This can be any HTML a SVG accepts. For example a `` component to add gradients, clipping paths, or masks.
## Examples
Below are some examples on how to implement the slot for configuring the svg/path.
**Note:** The framerate of the gifs are limited to 25, the actual animation is smooth.
### Gradient
```vue
```
#### Result:
### Clipping path (mask)
```vue
```
#### Result:
### Gradient
```vue
```
#### Result:
# Styling the container
In order for the svg to take up full-width there is a container surrounding the svg with a class of `.vue-wavify-wave`. By standard its styling is set to `width: 100%; display: inline-block;`. The svg animating the wave is set to a width & height of 100%. Therefore, it is advised to manipulate the height and width by using the css class of the container.
# Credits
This component/package is mainly based on the [react-wavify](https://www.npmjs.com/package/react-wavify) package and can be seen as a simple port from react to vue, implementing functionalities similar to that of [Benjamin Grauwin](http://benjamin.grauwin.me/)'s [Wavify](https://github.com/peacepostman/wavify) plug-in.