Simply wave

Overview

A simple JavaScript package that allows you to add wave effects to your texts and titles in the easiest way possible

Installation

  npm install simply_wave

Demo

See the demo and test simply wave

Features

• wave effects
• wave mirror effects

Usage ( Classic )

Basic

HTML

<p id="wave">This text wave<p>

JavaScript

import { wave } from "../node_modules/simply_wave/index.js"

const waveOptions = {
    target: "wave",
    animationDelay: 200,
    letterDelay: 20,
    easing: "linear"
}

wave(waveOptions)

React

HTML

<p id="wave">This text wave<p>

JavaScript

import { wave } from "simply_wave"

const waveOptions = {
    target: "wave",
    animationDelay: 200,
    letterDelay: 20,
    easing: "linear"
}

wave(waveOptions)

Vue

HTML

<p id="wave">This text wave<p>

JavaScript

import { wave } from "simply_wave"

export default {
  name: "MyComponent",

  mounted() {
    const waveOptions = {
      target: "wave",
      animationDelay: 200,
      letterDelay: 20,
      easing: "linear"
    }

    wave(waveOptions)
  }
}

Options

Required

| Parameter | Type | Description | Units | | :-------- | :------- | :------------------------- | :---- | | target | string | Your target | HTML id |

Optional

| Parameter | Type | Description | Value | | :-------- | :------- | :------------------------- | :---- | | transform | string | value of the letter movement | em, rem, px, % | | duration | number | animation duration for each letters | ms | | animationDelay | number | time before animation start | ms | | letterDelay | number | letter delay for each letters | ms | | easing | string | like timing function in CSS | ease-in / ease-out / ease-in-out / linear / cubic-bezier | | iterations | number / string | number of animation repetitions | string = Infinity / number = 0 - ∞ | | fill | string | how the animation finish | both / forwards / backwards / none | | direction | string | direction of the animation | reverse / alternate / alternate-reverse / normal | | opacity | boolean | if the letter comme with a fade | boolean | | overflow | boolean | if the letters appear | boolean | | mirror | boolean | add mirror effect | boolean | | mirrorStyle | boolean | add second effect to mirror animation | boolean |

Usage ( Mirror )

Information

We strongly recommande to use mirror effects with overflow set to false and opacity set to true for a better visual (like the gif).

Possibilities

classic

const waveOptions = {
    target: "wave",
    transform: "100%",
    mirror: true,
    mirrorStyle: false
}

rotation

const waveOptions = {
    target: "wave",
    transform: "-100%",
    mirror: true,
    mirrorStyle: false
}

overlap

const waveOptions = {
    target: "wave",
    transform: "100%",
    mirror: true,
    mirrorStyle: true
}

reverse wave

const waveOptions = {
    target: "wave",
    transform: "-100%",
    mirror: true,
    mirrorStyle: true
}

Used By

• Neza agency - www.neza.fr

Author

Gabriel Voissiere