Jump to content
Search Community

Problems with fast hover and click with React and GSAP

Drew49 test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 ? 

Link to comment
Share on other sites

You don't "have" to, but it's seriously recommended. This can be managed easily by adding event related animations to context.

 

const contextRef = useRef(null)

useEffect(() => {
	contextRef.current = gsap.context((self) => {
      self.add("onMouseEnter", () => {
      	/* whatever you need here */
      })
    })
}, [])

return (
	<div onMouseEnter={contextRef.current?.onMouseEnter}></div>
)

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...