Drew49 Posted August 18, 2022 Share Posted August 18, 2022 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 More sharing options...
SteveS Posted August 18, 2022 Share Posted August 18, 2022 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 More sharing options...
Drew49 Posted August 18, 2022 Author Share Posted August 18, 2022 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 More sharing options...
SteveS Posted August 18, 2022 Share Posted August 18, 2022 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. 2 Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 Here you go! See the Pen xxWRjyq by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Drew49 Posted August 19, 2022 Author Share Posted August 19, 2022 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 More sharing options...
SteveS Posted August 21, 2022 Share Posted August 21, 2022 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> ) 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now