Jump to content
Search Community

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

wdee test
Moderator Tag

Go to solution Solved by wdee,

Recommended Posts

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

Capture d’écran 2022-03-07 à 11.17.46.png

Capture d’écran 2022-03-07 à 11.18.20.png

Capture d’écran 2022-03-07 à 11.18.47.png

See the Pen PoOgqZe by willdgre (@willdgre) on CodePen

Link to comment
Share on other sites

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

  • Solution

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

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