Jump to content
Search Community

onMouseOver not working correctly

nevo_e test
Moderator Tag

Recommended Posts

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

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

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