Multiple tweens on scroll

[Guest DIALBERTO]

Hi,

 

I'm new using GSAP and till now almost convinced that it's something I need.

It's great and has many cool options, can't wait to master it completely.

 

My question is this....I have made a tween for some text in the header div that

- on page-load, fade's in and stays there till you start scrolling

- on page-scroll, the text fade's out and moves up.

 

//check when document is ready

$(document).ready(function(){

// check when all images, links and assets have been loaded

 

$(window).on('load',function(){

TweenMax.fromTo("#text1", 2, {autoAlpha:0, scale:0.5}, {autoAlpha:1, scale:1, ease: Power1.easeInOut,  onComplete:function(){

 

var t = new TweenMax.to("#text1", 1, {autoAlpha:0, y:-150, paused:true, ease: Power1.easeInOut}),

scrollThreshold = {"start":100, "stop":1000};

 

$(window).on("scroll", function(e) {

var currentScroll = $(window).scrollTop(),

currentProgress = (currentScroll - scrollThreshold.start) / (scrollThreshold.stop - scrollThreshold.start);

 if (currentScroll > scrollThreshold.start && currentScroll < scrollThreshold.stop) {

t.progress(currentProgress);

 } else if (currentScroll < scrollThreshold.start) {

t.progress(0);

 } else if (currentScroll < scrollThreshold.stop) {

t.progress(1);

 }

 });}});

 });});

 

 

So far so good, and ik works perfectly...but how can I add more tweens after the text1 fade's out on scroll?

 

My idea is this;

 

text 1 fades in on load

text 1 fades out on scroll

text 2 fades in on further scroll

text 3 fades in on further scroll

text 3 fade's out and moves up on further scroll

text 2 fades out and moves up on further scroll......the end.

 

Another thing is, how to get rid of the short annoying flashing text when TweenMax kicks in on scrollThreshold start 100px?

 

I hope anyone can help.

 

Thanks in advance.

[Jonathan]

Hello DIALBERTO, and welcome to the GreenSock forum!

 

GreenSock also has a ScrollToPlugin to help you manage the scrolling.

 

But to better assist you.. can you please set up a live code example.

 

Here is a great video tut on how to create a codepen demo example.

 

This way we can test your code in live editable environment

 

ScrollPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

 

Thanks

[Guest DIALBERTO]

Hello Jonathan,

 

thank you for your reply. I watched the video on how to make a codpen...thx, very helpful.

Awesome tool btw....very nice layout. Wish I started out with that one instead of Dreamweaver (used to that now)

 

Anyway here's the link to the codepen: 

See the Pen NGNpRd by anon (@anon) on CodePen

 

Best regards.

[Jonathan]

Helo DIALBERTO,

 

To add more Tweens after your first fromTo() tween in your codepen example, you can sequence them using TimelineMax or TimelineLite

 

Here is a great video by Carl on How to sequence your tweens. so you can add more than one tween for your animation.

 

Sequence JavaScript Animations Like a Pro with GSAP's TimelineLite:

 

http://greensock.com/sequence-video

 

Other useful video tuts:

 

http://greensock.com/learning/

 

[Guest DIALBERTO]

Yeah well, I watched that tut. many times already, but doens't work at all that way in a function on scroll.

Which is the reason I posted this question.

 

Dont know what I'm doing wrong......but it just won't work!

Maybe it's just not possible to make multiple tween run on scroll with Greensock alone??

 

An example: http://tympanus.net/Blueprints/OnScrollEffectLayout/

 

And in my codepen it's only text Fade in and out on scroll down/up (reverse) I'm trying to achieve.

 

Anyone??

[Guest DIALBERTO]

ScrollMagic is the solution, together with GSAP it's awesome.