nevo_e
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by nevo_e
-
-
This is my the part that my React component returns:
<Container maxWidth="lg"><Grid container spacing={3}>{ monitors.map((monitor, index) =>monitor.selected && (<Griditemkey={index}xs={12}onMouseLeave={handleHoverExit}onMouseOver={(e) => handleHover(e, monitor.name)}><Boxcomponent={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.
-
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 CodePenOkay everything works now
thank you very much for everything, you were very helpful.
-
2
-
-
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"));
-
1 minute ago, OSUblake said:
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 ```
onMouseOver not working correctly
in GSAP
Posted
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.