sergiu Posted September 8, 2021 Share Posted September 8, 2021 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 More sharing options...
OSUblake Posted September 8, 2021 Share Posted September 8, 2021 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 4 Link to comment Share on other sites More sharing options...
sergiu Posted September 8, 2021 Author Share Posted September 8, 2021 @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 Link to comment Share on other sites More sharing options...
sergiu Posted September 8, 2021 Author Share Posted September 8, 2021 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 More sharing options...
Cassie Posted September 8, 2021 Share Posted September 8, 2021 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? 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 8, 2021 Solution Share Posted September 8, 2021 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 2 Link to comment Share on other sites More sharing options...
sergiu Posted September 9, 2021 Author Share Posted September 9, 2021 @OSUblake thank you very much! 👍 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now