[[React] animation on a parent component messes with children width and height]

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

[[React] animation on a parent component messes with children width and height]

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

 

[[React] animation on a parent component messes with children width and height]

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

[[React] animation on a parent component messes with children width and height]

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