[Sequence of Fade in tweens not going the distance]

Hi there,

 

I just can't figue out what I am doing wrong here. I have a paragraph that  i need different lines to fade in at different times.  I don't know why I can't figrue out what I am doing wrong here. Hopefully someone can help[ me?

 

 

One these i am using SuperScrolllarama, the first part of my Tween animation works perfectly  I wipe the pages easily.

 

But I also hava a word heavy paragraph, and i need the lines to fade in separately. i have managed to 

break the whole thing when i try to run in my browers.

 

 

var pinDur = 1000;

// create animation timeline for pinned element

var pinAnimations = new TimelineLite();

 

pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5);

pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 );

pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5); 

pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5);

pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5);

pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5);

pinAnimations.append([TweenMax.to($('#timeline'), .5, {css:{top:0}})], .5);

pinAnimations.append([TweenMax.to($('#next'), .5, {css:{top:0}})], .5);

//pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));

 

*************THE ABOVE LOOK FINE****

 

MY PROBLEMS ARE BELOW*****

var controller = $.superscrollorama();

 

 

 

   controller.addTween('#line1', TweenMax.from($('#line1'), .2, {css:{opacity:0}}))

   controller.addTween('#line2', TweenMax.from($('#line2'), .5, {css:{opacity:0}}))

   controller.addTween('#line3', TweenMax.from($('#line3'), .7, {css:{opacity:0}}))

   controller.addTween('#line4', TweenMax.from($('#line4'), .9, {css:{opacity:0}}));