Expdand div with content

[deniscapece]

Hello,

I'm struggling with these divs... the expand animation works fine (i think however i could reveal otherwise the content than using the autoAlpha...)

The problem occurs when the anim is not finished and i hover on another div (something like pink -> blue -> pink): the wrapper with the content disappears, only revealing on empty div.

Any suggestions would be more than welcome :-)))

Thanks in advance !!!

See the Pen LYyNLbJ by Xamichee (@Xamichee) on CodePen

[Cassie]

Heya -  You're going to want to create a timeline and play and reverse that on hover.

Also watch out for other elements conflicting with the hover events - in this case your inner elements needed pointer-events:none added

See the Pen BaRKJer?editors=1010 by GreenSock (@GreenSock) on CodePen

[deniscapece]

Hi Cassie,

Thanks for the advice on pointer-events... didn't think of that one!

It's still not as fluid as i'd like however... i'm working on it trying to come with a more suitable solution!

[mikel]

Hey @deniscapece,

 

Does that look like fluid for you?

 

See the Pen Vwbjvdg by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[deniscapece]

Thanks Mikel!

it sure is fluid!!!

So i went for the middle-ground solution and i came with this :

 

See the Pen OJmXRvm by Xamichee (@Xamichee) on CodePen

 

Thank everyone for the help...