amine.daimallah90

thank you so much, this is exactly what I need, I appreciate your time

sorry for not providing a demo, I just made one quickly I hope it will be clear to you what I am trying to do, also I already read the article thank you so much, this is the first time i use GSAP, so i am sure my code won't be perfect, anyway here is the demo https://codesandbox.io/embed/serene-violet-fsm8mm?fontsize=14&hidenavigation=1&theme=dark

thank you so much I appreciate it, I will have a look at the doc, but this still doesn't fix my problem and what i want to component to do

I am building a link component using react js and gsap for animation, what I want to do is when I hover I want the animation to start, and while hovering it should keep repeating but after I the mouse leave I want it to resume the animation first and then kill it so it shouldn't kill animation immediately. const Link = forwardRef<HTMLAnchorElement, LinkProps>( ({ children, variant, ...props }, ref) => { const textRef = useRef<HTMLAnchorElement>(null); const tl = useRef<GSAPTimeline>(); useEffect(() => { if (textRef.current) { const ourText = new SplitType(textRef.current, { tagName: "span", types: "words, chars", wordClass: "", charClass: "", }); const chars = ourText.chars; tl.current = gsap.timeline({ paused: true, }); tl.current .to(chars, { opacity: 0.2, ease: "power2.inOut", stagger: { amount: 0.4, ease: "none", }, }) .to( chars, { opacity: 1, ease: "power2.inOut", stagger: { amount: 0.4, ease: "none", }, }, "<+=0.3" ); } }, []); const handleMouseEnter = () => { tl.current?.restart().repeat(-1); }; const handleMouseLeave = () => { if (tl.current) { tl.current.resume().kill(); } }; return ( <a ref={textRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={cn(linkStyle({ variant }))} {...props} > {children} </a> ); } );