copy contents of one div to another through a timeline

[ericshew]

Hello Greensockers,

 

I'm running into a problem that I hope is fairly simple. I would a menu to be split into two parts. The first part has the level one menu items. When these are hovered over, the children of the menu choice that is hovered over appear in the second part. The challenge is I don't know how to manipulate text. Ideally, I would not be using the text plugin to minimize the loading of libraries. 

 

Would welcome your help. Thank you in advance.

See the Pen boPjag by ericshew (@ericshew) on CodePen

[Sahil]

Here is the demo with jQuery.

 

See the Pen zEVmQp?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[ericshew]

You are awesome, Sahil. Thanks so much! 

[ericshew]

I'm running into one more problem. I've been banging my head against this for an hour and I'm not just not seeing it. The problem is that the LIs are being copied over without a UL. I've tried adding the wrap function but it doesn't seem to work. Could you show me the error of my ways? Thanks in advance,

 

See the Pen qPeRrJ?editors=1111 by ericshew (@ericshew) on CodePen

 

[Sahil]

Oh I thought you will figure it out so I didn't bother to do it

 

There may be few other minor complexities depending on how your actual implementation is going to be, but if you are just going to add ul which basically strips out text and inserts ul tag in secondary div. If you had used $elem.html(), it will include that text too. Then there are other situations where you can use map. Feel free to ask more questions rather than banging your head for an hour.

 

See the Pen mBNWdE?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[ericshew]

Thanks, Sahil. You are being tremendously helpful. One thing I'm nothing with the codepen above that the hover only works once. If you hover over the same thing repeatedly, the submenus no longer appear. Is there any easy way to fix this?

[Sahil]

You mean you want them to appear as soon as you hover over? Just move .call() before .to() in timeline.

[ericshew]

Actually, you solved it with the use of clone()!!! Thank you so much. Works perfectly now! 

[Sahil]

Well to add further, if you ever decide to move .call() ahead of tween which you most probably will, you will run into issue. What right now happening is, function is called only after entire animation and if you mouseout, it never gets called on play or reverse. But if you move it ahead, it will be called on mouseover and mouseout at the start(play) and end(reverse) of timeline, respectively.

 

As a result, when you hover first element it's content will get cloned but by the time previous mouseout will complete and due to reversed timeline, it will call the function and set its content into secondary div. Here is demo that fixes this issue by keeping track if mouse is on the element and only then content is copied.

 

You can fork my previous pen and move call ahead of tween to see what I mean.

 

See the Pen NaQpMz?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[ericshew]

Complicated but I think I get it. Thank you again Sahil!