Jump to content
Search Community

Timeline is not executed on every nav link

sergiu test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

 

Link to comment
Share on other sites

Welcome to the forums @sergiu

 

You might want to check out our React Guide. A timeline should never be created outside of a hook, and your mouse events keep adding more animations to the timeline, making it longer.

 

If you need more help, please create a minimal demo. Here's a next.js template you can fork.

https://codesandbox.io/s/gsap-nextjs-starter-jekrn

 

  • Like 4
Link to comment
Share on other sites

From a glance - possibly because you're using the same ID on each button to reference the filter?  #filter

But you have four filters - not entirely sure the outcome of that...

I assume you're animating the filter values present in each link component - but only the first filter in the document is being applied so you can't see the styles changing in the last three.

Have you tried unique ID's for the filters *or* only including one filter per set of links?

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...