Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

sergiu

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by sergiu

  1. @OSUblake thank you very much! 👍
  2. I moved timeline in the hook, but the problem is still the same, it works well only on first button
  3. @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
  4. 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> ); };
×