greensock tween new dom

by annam

HTML

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

CSS

#box {
  height: 100px;
}

#box-outer {
  background: yellow;
}

JavaScript

var timeline = new TimelineMax({
   paused: true
 });
 
timeline.add(function(){
	$('#box').wrap('<div id="box-outer" />')
}, 1)
 
// method 1, does not work
//timeline.add(TweenLite.to("#box-outer", 1, { width: 100 }), 2)

// method 2, works
timeline.add(function(){
	timeline.add(TweenLite.to("#box-outer", 1, { width: 100 }), 2)
}, 2);

timeline.play()