[Problems with fast hover and click with React and GSAP]

On 8/18/2022 at 9:52 PM, SteveS said:

Regardless, you have to clean up your animations. One way to do this in react is to create a gsap context and create a function inside of it to handle your tweens. I don't have an example handy of how to do it right now. Nevertheless, you should always aim to have components maintain their own animations to avoid cross-contamination and other bugs in react.

 

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 ? 

[Problems with fast hover and click with React and GSAP]

16 minutes ago, SteveS said:

What an odd error. I don't think I've seen something like that before.

The code you have is a bit weird. If I had to guess, since you are setting state of a parent component onComplete in the mouseLeave handler and not reverting your animations it's doing, well, something.

Truthfully you should make each input its own component that handles its own animations. The result will be far less bug prone. I'm hesitant to look at other solutions before that since they might not work.

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

[Problems with fast hover and click with React and GSAP]

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.

[Best practice about React with GSAP]

On 7/18/2022 at 6:14 AM, GreenSock said:

I wonder if you were using it wrong - do you have a very simple demo showing it NOT working? 

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

 

On 7/18/2022 at 4:20 PM, SteveS said:

@Drew49

In react, Ref's are not populated until after the first render. In theory, so long as you were using your q function in a hook, it should have worked. If you tried to use it outside of a hook, it wouldn't have. I didn't check at the time and your code has since changed, so I have no idea.

Thank you

[Best practice about React with GSAP]

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

[Best practice about React with GSAP]

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😆😀