For my website designs, I have been experimenting with a JavaScript library known as Wavify (https://github.com/peacepostman/wavify) to incorporate wave animations.
Recently delving into the world of React, I pondered whether I could integrate Wavify into my React projects by utilizing npm for installation.
I attempted the following implementation:
import React from 'react';
import {TweenMax} from 'gsap';
import {wavify} from 'wavify';
import './App.css';
function App() {
let wave = React.createRef();
let waveAnimation = wavify(wave, {
height: 60,
bones: 3,
amplitude: 40,
color: 'rgba(150, 97, 255, .8)',
speed: .25
})
return (
<div className="App">
<div id="wave" ref={wave}></div>
</div>
);
}
export default App;
However, I encountered an error message stating:
TypeError: Object(...) is not a function
App
C:/Users/*****/*****/myReactApp/src/App.js:14
11 |
12 | let wave = React.createRef();
13 |
> 14 | let waveAnimation = wavify(wave, {
| ^ 15 | height: 60,
16 | bones: 3,
17 | amplitude: 40,
View compiled
▶ 16 stack frames were collapsed.
Any guidance or advice on resolving this issue would be immensely appreciated.