Animating floating column percentages help

[Cato]

I'm trying to figure out why my right column doesn't expand properly when "hide" button is clicked. Both left and right columns are floating left; left column ranges from 20% width to 0 %; right column ranges from 80% width to 100% respectively. 

 

Looks great when "show" is clicked, but there seems to be a floating/width issue when "hide" is clicked.

 

This seems like it should be simple, but I can't figure out what I'm doing wrong...

 

Thanks a trillion.

BC

See the Pen qdXxPe by bcato3000 (@bcato3000) on CodePen.

[Diaco]

Hi Cato 

 

if i understood correctly what's your problem , pls use width:'0%' , btw , you can try another simpler way too :

var T = new TimelineLite({paused:true})
T.to($('.left'),0.5,{width:'0%',}).to($('.right'),0.5,{width:'100%'},0);

$('.show').click(function(){T.reverse()});
$('.hide').click(function(){T.play()});

or even simpler , just with one Btn to toggle your Tween / Timeline , like this : 

See the Pen Pwzomo by GreenSock (@GreenSock) on CodePen.

[Cato]

Ah, I knew it would be something simple! Thanks for your help, D.AW