[Timeline is not executed on every nav link]

@OSUblake thank you very much! 👍

[Timeline is not executed on every nav link]

I moved timeline in the hook, but the problem is still the same, it works well only on first button

[Timeline is not executed on every nav link]

@OSUblake

 

I created a codeSandbox in react

https://codesandbox.io/s/serj-code-uexj2

the effect that I want to achieve is this one, 

https://tympanus.net/Development/DistortedLinkEffects/.  Simple Line....

but I have problem with timeline and it's state on every link

[Timeline is not executed on every nav link]

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>
  );
};