nevo_e Posted October 23, 2021 Share Posted October 23, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted October 23, 2021 Share Posted October 23, 2021 Hi nevo, It's impossible to tell what's going on from a code snippet, especially as this sounds more like a CSS issue. Can you make a minimal demo showing the issue? Just fork this CodeSandbox template. https://codesandbox.io/s/gsap-react-starter-ut42t 1 Link to comment Share on other sites More sharing options...
nevo_e Posted October 23, 2021 Author Share Posted October 23, 2021 46 minutes ago, OSUblake said: Hi nevo, It's impossible to tell what's going on from a code snippet, especially as this sounds more like a CSS issue. Can you make a minimal demo showing the issue? Just fork this CodeSandbox template. https://codesandbox.io/s/gsap-react-starter-ut42t 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. 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