wdee Posted March 7, 2022 Share Posted March 7, 2022 Hello, I have a list of component (parents), inside this these components there are others components (children). I have a on hover gsap animation on parents, but when I hover them the children width and height change like there is some propagation, and I just want the parents to be animated not the children. Here is the code, The parents : listSuppTmp.push(<ContainerSuppRef rstart={((res.data[j].U) - parseInt(res.data[j].taille) + 1)} rend={res.data[j].U + 1}> <SupportDiv onMouseEnter={(e) => onEnter(e, res.data[j].ID, res.data[j].taille)} onMouseLeave={(e) => onLeave(e, res.data[j].ID)} key={res.data[j].ID}> { await axios.get(`http://localhost:8888/api/support/cassette-type-conn/${res.data[j].supportID}`) .then(res => { //console.log(res.data) return <ContainerPorts data={res.data}></ContainerPorts> }) } </SupportDiv> <RefDiv ref={el => elemsRef.current[res.data[j].ID] = el}>{res.data[j].support_ref}</RefDiv> </ContainerSuppRef>) (This listSuppTmp.push is in a for loop) The children : function ContainerPorts (props) { if (props.data.type === 'Cuivre') { return ( <> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> </> ) } return (<></>) } So in the children components, CuivrePort is a container of ports which are basically small cubes. On the 3 pictures, the first one is a parent that has not been hovered the 2nd it has been hovered the 3rd is a the normal behavior but empty and I want this with scaled children components inside Thanks in advance See the Pen PoOgqZe by willdgre (@willdgre) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 8, 2022 Share Posted March 8, 2022 If I understand your question correctly, this is totally unrelated to GSAP - it's how display: flex works when you don't set flex-shrink: 0. Try setting flex-shrink: 0 and flex-grow: 0 on those children and you'll see what I mean. Link to comment Share on other sites More sharing options...
wdee Posted March 8, 2022 Author Share Posted March 8, 2022 It seems to have a better behavior, but the children components are still distorted when hovered (by moving the mouse quickly in and out of the components) See the Pen PoOgqZe?editors=1010 by willdgre (@willdgre) on CodePen Link to comment Share on other sites More sharing options...
wdee Posted March 8, 2022 Author Share Posted March 8, 2022 7 hours ago, GreenSock said: If I understand your question correctly, this is totally unrelated to GSAP - it's how display: flex works when you don't set flex-shrink: 0. Try setting flex-shrink: 0 and flex-grow: 0 on those children and you'll see what I mean. I think it's related to Gsap because when the children comps are distorted, their width and height are modified and that's what my animation does, but it's supposed to work only on the parent. My animations look like this: const onEnter = ({target}, ID, taille) => { gsap.to(target, {height: () => {return (taille > 1 ? '100%' : '14vh')}, width: '37vw', zIndex:'100', duration: 0.4}) gsap.to(elemsRef.current[ID], {width: '0', height: () => {return (taille > 1 ? '100%' : '14vh')}, zIndex:'100', fontSize: 0, duration: 0.4}) } const onLeave = ({target}, ID) => { gsap.to(target, {height: '100%', width: '30vw', zIndex:'0', duration: 0.4}) gsap.to(elemsRef.current[ID], {width: '7vw', height: '100%', fontSize:'1.1vw', zIndex:'0', duration: 0.4}) } Link to comment Share on other sites More sharing options...
Solution wdee Posted March 8, 2022 Author Solution Share Posted March 8, 2022 It's fixed, it was an event propagation problem: in my onMouseEnter and onMouseLeave the event parameter were sent in gsap functions and the animation was based on this parameter, so instead of using the event parameter I use a ref 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