Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rnrrygh

Sequence of Fade in tweens not going the distance

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×