Hi,
Thanks for the demo.
I think you want to use addPause() here
tl.addLabel('step1')
.to('.red', 0.5, {width:250})
.addPause()
.addLabel('step2')
.to('.blue', 0.5, {width:450});
you use pause() to pause a timeline at any time.
The way you were using it you were pretty much pausing it as the timeline was being created.
addPause() inserts a pause into a timeline at a specific point in time.
more info here: https://greensock.com/docs/TimelineLite/addPause()