Cycle Through Text With A Wave Animation – wavy.js

Category: Animation , Javascript , Text | August 8, 2022
Author:murtuzaalisurti
Views Total:540 views
Official Page:Go to website
Last Update:August 8, 2022
License:MIT

Preview:

Cycle Through Text With A Wave Animation – wavy.js

Description:

A tiny JavaScript library that enables you to loop through an array of text strings with a configurable WAVE animation.

How to use it:

1. Install & download.

# NPM
$ npm i @murtuzaalisurti/wavy

2. Import the wavy.

// ES Module
import wavy from '@murtuzaalisurti/wavy';
// Browser
<script src="production.min.js"></script>

3. Create an empty container to hold the text.

<h2 class="example"></h2>

4. Initialize the wavy.js and specify an array of strings to cycle through.

wavy.wavy(
document.querySelector(".example"), 
  {
    words: ["String 1", "String 2", "String 3"]
  },
);

5. Config the wave animation.

wavy.wavy(
document.querySelector(".example"), 
  {
    words: ["String 1", "String 2", "String 3"]
  },
  {
    // font color
    color: 'black',
    // font size 
    fontSize: '1.5rem', 
    // font family
    fontFamily: 'Roboto', 
    // CSS scale transform
    transform: 'scale(1.8)'
  }
);

You Might Be Interested In:


Leave a Reply