Hover Reveal Issues

[jonasTribius]

Hi!

 

I'm kinda new to GSAP (and coding in general). I'm trying to make a menu where when you hover it reveals a div with image links. The video is how it looks on the staging site I'm building it on. I would like the div to stay revealed when I hover the mouse over the #Two div aswell but when I put everything in the #One Div it all breaks. Also the code doesn't work the same in the CodePen.

 

Any ideas on what I've been doing wrong? Hope this was clear enough.

 

//Jonas

See the Pen poqQaYb by jonasTribius (@jonasTribius) on CodePen.

[mvaneijgen]

Hi @jonasTribius welcome to the forum!

 

I have no idea why your animation isn't working on codepen and it is in your own environment. However I've change the logic a bit, I remove the styling from CSS and used a .from() tween, because your element is already at its initial state eg height: 100% and opacity: 1 (these are browser defaults), we can use that and just tell GSAP where we want to animate .from()

 

The following code works, but if you would ask me I would make everything part of your hover element, eg make #two a child of #one that makes everything so much easier instead of having to check for other things when things happen. 

 

Hope it helps and happy tweening! 

 

See the Pen LYMXBmv?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

[jonasTribius]

See the Pen jOXXRXp by jonasTribius (@jonasTribius) on CodePen.

 

Hi, thank you so much! 

 

If I were to have different categories like in the pen, can I make an array of some sort so I can use the same code for the same function for each animation?

[mvaneijgen]

Sure, this has nothing to do with GSAP and again it is better (and in this case it is necessary) to wrap the elements in a other container to scope them to the current hovered item.

 

Please keep the questions focused on here to GSAP, what you're asking now is just plain Javascript,  seen that you're new here I've answered your question, but in the future please follow the forum guidelines 

 

 

Hope it helps and happy tweening! 

 

See the Pen ExGGzEg?editors=0111 by mvaneijgen (@mvaneijgen) on CodePen.

[jonasTribius]

I think I get it, again thank you so much! ?