nevo_e

First of all, sorry for not including everything important into the question, I am new to this. I tried recreating it in codesandbox but it worked fine, so there must be a problem somewhere else. I will try to find an error and if I will not find it I will add the full code.

This is my the part that my React component returns: <Container maxWidth="lg"> <Grid container spacing={3}> { monitors.map((monitor, index) => monitor.selected && ( <Grid item key={index} xs={12} onMouseLeave={handleHoverExit} onMouseOver={(e) => handleHover(e, monitor.name)} > <Box component={Card} className={classes.content} boxShadow={4} > <CardContent > <Typography className={classes.title} variant="h5"> {monitor.name} </Typography> <Typography className={classes.status} variant="subtitle1"> status: <span className={monitor.active ? classes.statusActive : classes.statusInactive}> { monitor.active ? ' running' : ' stopped' } </span> </Typography> </CardContent> <CardActions> <Button className={classes.button} onClick={() => handleChangingStatus(index)}> { monitor.active ? ( <i className="fas fa-square"></i> ) : ( <i className="fas fa-play"></i> ) } </Button> <Button className={classes.button} onClick={() => openOptions(index)}> <i class="fas fa-ellipsis-v"></i> </Button> <Button className={classes.button} onClick={() => handleRemove(index)}> <i class="fas fa-times"></i> </Button> </CardActions> </Box> </Grid> ))} </Grid> </Container> This is my gsap setup: const handleHover = ({ currentTarget }, storeName) => { console.log('hovered') gsap.to(background, { duration: 1, background: `url(./media/stores/${storeName.toLowerCase()}.jpg) center center`, }); gsap.to(background, { duration: 0.4, opacity: 1, ease: "power3.inOut" }); gsap.from(background, { druation: 0.4, transformOrigin: "right top" }); 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" }); gsap.to(background, { duration: 0.4, opacity: 0 }); }; The problem is that I need to hover over an element inside Grid item, for example a Button, for gsap to start working. I would like to run gsap transformation as soon as I enter inside the border of Grid item.

Okay everything works now thank you very much for everything, you were very helpful.

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. https://codepen.io/GreenSock/pen/ZEKJPLa?editors=1111 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"));

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.

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 ```