wdee

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

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}) }

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) https://codepen.io/willdgre/pen/PoOgqZe?editors=1010

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