nevo_e Posted October 4, 2021 Share Posted October 4, 2021 I am using GSAP and Material UI with React. In the application I list my data in rows and I would like to slightly rotate the entire row, named Grid (id="target), with it's content when I am hovering over it. Instead of this the animation does not occur when I hover over for example buttons or text that is inside of it. ``` import React from 'react' import { Container, Grid } from '@material-ui/core'; import gsap from 'gsap'; const List = ({ list }) => { const handleHover = e => { console.log(e.target) gsap.to(e.target, { duration: 0.3, y:3, skewX: 4, ease: "power3.inOut" }); }; const handleHoverExit = e => { console.log(e.target) gsap.to(e.target, { duration: 0.3, y:-3, skewX: 0, ease: "power3.inOut" }); }; return ( <div> <Container maxWidth="lg"> <Grid container spacing={3}> { list.map((element, index) => element.selected && ( <Grid id="target" item key={index} xs={12} onMouseEnter={e => handleHover(e)} onMouseOut={e => handleHoverExit(e)} > ...CONTENT </Grid> ))} </Grid> </Container> </div> ) } export default List ``` Link to comment Share on other sites More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 Welcome to the forums @nevo_e Did you mean currentTarget instead of target? Link to comment Share on other sites More sharing options...
nevo_e Posted October 4, 2021 Author Share Posted October 4, 2021 1 minute ago, OSUblake said: Welcome to the forums @nevo_e Did you mean currentTarget instead of target? Hello! First of all thank you for your hospitality . But no, target is just random id so you can identify the tag easily. I do not know what currentTarget is. Link to comment Share on other sites More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 I meant the currentTarget of the event. See our React Guide, there is a hover example there using currentTarget. target will be the element that first receives the event. currentTarget will be the element that has the listener on it. Link to comment Share on other sites More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 More information about currentTarget. Quote The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget 1 Link to comment Share on other sites More sharing options...
nevo_e Posted October 4, 2021 Author Share Posted October 4, 2021 6 minutes ago, OSUblake said: More information about currentTarget. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget Okay I understand it now, but it still does not work perfectly when I hover over some more nested elements. I made a similar example in this codepen. You will see that when you hover over line2 or line3, the animation ends. EDIT: I need to learn how to edit codepens so please just replace Babel at the example you provided with mine. See the Pen ZEKJPLa?editors=1111 by GreenSock (@GreenSock) on CodePen const { useEffect, useState } = React; function App() { const onEnter = ({ currentTarget }) => { gsap.to(currentTarget, { backgroundColor: "#e77614", scale: 1.2 }); }; const onLeave = ({ currentTarget }) => { gsap.to(currentTarget, { backgroundColor: "#28a92b", scale: 1 }); }; const handleHover = ({ currentTarget }) => { gsap.to(currentTarget, { duration: 0.3, y:3, skewX: 4, ease: "power3.inOut" }); }; const handleHoverExit = ({ currentTarget }) => { gsap.to(currentTarget, { duration: 0.3, y:-3, skewX: 0, ease: "power3.inOut" }); }; return ( <div className="app flex-row"> <div style={{border: "1px white solid"}} onMouseEnter={handleHover} onMouseOut={handleHoverExit} > <div> <div> line1 </div> <div> line2 <span> line3 </span> </div> </div> </div> </div> ); } ReactDOM.render(<App />, document.querySelector("#root")); Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 4, 2021 Solution Share Posted October 4, 2021 6 minutes ago, nevo_e said: I need to learn how to edit codepens Just click the fork button in the bottom right. And I would use mouseleave instead of mouseout for the event. There is a difference. Quote mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does. This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element). https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event See the Pen bGRyPXb by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
nevo_e Posted October 4, 2021 Author Share Posted October 4, 2021 36 minutes ago, OSUblake said: Just click the fork button in the bottom right. And I would use mouseleave instead of mouseout for the event. There is a difference. https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event See the Pen See the Pen bGRyPXb by GreenSock (@GreenSock) on CodePen by GreenSock (@GreenSock) on CodePen Okay everything works now thank you very much for everything, you were very helpful. 2 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