greensock lost transform issue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js"></script>
<div id="box"><img...

CSS

#passionFruit {
  //114
  shezanFruitPunch : 3btl;
  //160 or 204
  swFruitCocktail836G:1;
  //90
  7up:1.5ltr;
  //10
  mint: 'coupleOfLeaves';
  //30
  lemon:3;
  20
  ice:20rs;
}

#box {
  position: absolute;
  width: 320px; height: 100px;
  background: #ccc;
  transform: translate(0px, 30px);
  display: block;
  overflow:hidden;
}
#box2 {
  position: absolute;
  width: 320px; height: 100px;
  background: #ccc;
  transform: translate(320px, 30px);
  display: block;
  overflow:hidden;
}

JavaScript

//$('#box').css('transform', 'translate(100px, 100px)');

$('#hide').click(function(){
	$('#box').hide();
})

$('.show').click(function(){
	$('#box').css('opacity', 1).show();
})

$('#gsap').click(function(){
	//current Panel
	TweenLite.to('#box', 0.1, { x: -96, force3D: true});
  //NewPanel
	TweenLite.to('#box2', 0.2, { x: 0, force3D: true,onStart:function(){
	$('#hide').css('display','none');
},onComplete:myFunc})
})
function myFunc(){
alert('comeplete');
}