Hello, can someone help me with this, I am new to gsap and have to use it in react to handle e turbulence hover effect
this is my component
import React, { useRef, useEffect, useCallback } from "react";
import Link from "next/link";
import { gsap } from "gsap";
import {
Styled,
StyledButton,
StyledLinkText,
StyledTurbulenceLine
} from "./styles";
interface AnimatedLinkProps {
href: string;
text: string;
}
export const AnimatedLink = ({ href, text }: AnimatedLinkProps) => {
const btnRef = useRef(null);
const turbulenceRef = useRef(null);
const turbVal = { val: 0.00001 };
const btTl = gsap.timeline({
paused: true,
onStart: () => {
btnRef.current.style.filter = `url("#filter")`;
},
onComplete: () => {
btnRef.current.style.filter = "none";
}
});
return (
<Link href={href}>
<Styled>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
className="svg-filters"
>
<defs>
<filter id="filter">
<feTurbulence
ref={turbulenceRef}
type="fractalNoise"
baseFrequency="0"
numOctaves="1"
result="warp"
/>
<feOffset dx="-90" result="warpOffset" />
<feDisplacementMap
xChannelSelector="R"
yChannelSelector="G"
scale="30"
in="SourceGraphic"
in2="warpOffset"
/>
</filter>
</defs>
</svg>
<StyledButton
onMouseEnter={() => {
btTl.eventCallback("onUpdate", () =>
turbulenceRef.current.setAttribute("baseFrequency", turbVal.val)
);
btTl.to(turbVal, 0.9, { val: 0.7 });
btTl.to(turbVal, 0.1, { val: 0.2 });
btTl.to(turbVal, {
duration: 0.4,
//ease: "Quint.easeOut",
startAt: { turbulence: 0.9 },
turbulence: 0
});
btTl.restart();
}}
onMouseLeave={() => btTl.progress(0).kill}
>
<StyledLinkText>{text}</StyledLinkText>
<StyledTurbulenceLine
className="test"
ref={btnRef}
></StyledTurbulenceLine>
</StyledButton>
</Styled>
</Link>
);
};
