Jump to content
GreenSock

sergiu

Timeline is not executed on every nav link

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

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

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

  • Solution
36 minutes ago, Cassie said:

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

 

That's def a big problem. You need to give your filters unique IDs.

 

serj-code (forked) - CodeSandbox

 

  • Like 2
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.
×