Sequence of Fade in tweens not going the distance

[rnrrygh]

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}}));

 

 

[Carl]

Hi and welcome to the GreenSock forums.

 

It seems like the problem is specific to your superscrollorama implementation.

 

To be sure, please remove all the code that you stated works fine.

You should be left with a file that only has this js

 

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}}));
 

Does the reduced code above work? 

 

If not, please further reduce your code to only include the dom elements (and their respective css) that are targeted in your superscrollorma code.

 

If that reduced code still has problems please post these reduced files (with all dependencies, jquery, superscrolloroma, TweenMax etc) somewhere that folks can download and explore them. 

 

You can attach a zip to this thread (more reply options > choose files) perhaps there is something obvious that will jump out at us.

 

For the best help regarding superscrollorama you can file an issue here: https://github.com/johnpolacek/superscrollorama/issues?state=open