Drew49

I have done in another way without context, here the link: https://codesandbox.io/s/gsap-with-input-and-react-vgcgbj?file=/src/App.tsx do i need to clean up the animation even in the 'OnBlur' 'OnFocus' 'OnMouseEnter' ecc... or only in the UseEffect ?

In the onComplete i add the state of the placeholder opacity(true opacity:1 - false opacity: 0.5) with styled components. Can i fake the placeholder with a <span> and position:absolute ecc.. but i wanna try this way

This is the part of the project at what i'm working on: https://codesandbox.io/s/gsap-with-input-and-react-vgcgbj?file=/src/SingleInput/SingleInput.tsx My problem here is when i move fast the mouse over the input and i see the repetitions of the animation (onMouseEnter), it's a little bit annoying and not natural, how can i do to prevent that? it's really ugly to see.

I try again to use it, and now it works, previously i had done some mistake. Thank you

Thank you, now with the useSelector hook i resolve all the problems, it works great! But i don't know why with only "gsap.utils.selector(ref)" it did't work and i needed to use useMemo

Hi, Here there is my code : https://codesandbox.io/s/gsap-with-react-n23k7h?file=/src/index.tsx I'm following a tutorial written in JS Vanilla with GSAP, but i need to use it on React so i transform all the code. Of course all work's great, like expected. But i don't know if there is a better way to write that. For example inside the components "InputContainer" (/component/form/input/inputContainer): 1. i push all the '.input-container' inside the revealRefs array, instead of querySelectorAll ( i also tried the utility 'selectors' but it doesn't work, maybe because this container is inside a map loop, don't know) 2. Then inside the useEffect i loop revealRefs, and inside the forEach i needed to use querySelector if i wanna select all the input's There are similar example in the code, but if i refactor one component, the others are the same. So there is a better way to handle that? Thank You??