GSAP with scrollpath.js

[des_igner]

Hi,

 

I'm new here and not sure if anyone is going to be able to help me, but thought it was worth a shot.

 

I'm currently building a website that uses scrollpath.js (http://joelb.me/scrollpath/)

 

When the user scrolls to each "page" I want animation to kick in using GSAP. In the part of the code where I define my scroll path it allows me to call functions when a user scrolls to a specifc "page". 

 

This all works fine. The user scroll > gets to a certain page > animation using GSAP is triggered. BUt that's where it breaks, It won't allow the user to continue scrolling along the rest of the path and it just gets stuck showing the animation over and over again.

 

Like I said, I'm not even sure anyone can help me with this, but I thought it was worth a shot.

 

Thanks

 

I've attached the test files to see if that helps?

 

Phil

scrollpath.zip

[Carl]

Hi and welcome to the GreenSock forums.

Thanks for providing the sample file.

 

I am not familiar with the internal workings of scrollpath.js but I have some info that will help.

I found the code that was causing the problem

 

 

 

   function ShowAnimation() {


            // This Create the TimeLine instance and assigns to a variable
                var tl = new TimelineLite();




               // This appends to the timeline
                tl.to(photo, 1, { width: "50%" });


                //add another sequenced tweeen (by default this is added to the end of the timeline)
                //    tl.to(photo, 1, { height: "300px", ease: Elastic.easeOut });


                //offsets the next tween by 0.75 secs so there's a gap between this tween and the last one
                tl.to(photo, 1, { opacity: 0.5 }, "+=0.75");


                //overlap the next tween with the previous one by 0.5 seconds
                tl.to(photo, 1, { rotation: 25, ease: Back.easeOut }, "-=0.5");


                tl.to(photo, 1, { rotation: 0, ease: Back.easeOut });


                tl.to(photo, 1, { width: "100px", left: "0", top: "0" });




                //Animate 3 elements but stagger there start times by 0.5second
                tl.staggerTo([photo, photo2, photo3], 1, { opacity: 1, ease: Back.easeOut }, 0.5);


                tl.staggerTo([photo, photo2, photo3], 1, { left: "250px", ease: Back.easeOut }, 0.5);


// **** COMMENT OUT or REMOVE THE NEXT 2 LINES ****
 
               TweenLite.set(welcomeText, { transformPerspective: 500 });
                  tl.to(welcomeText, 2, { rotationy: 45, scaleX: 0.8, z: -300 });
            }
 

It seems that welcomeText is not defined. Saw error in console and couldn't find it in your source.

If you remove the lines noted above, you will be able to scroll past your TimelineLite animation.

 

Also keep in mind that if you perform any sort of transformation on an element it will create a 3D or 2D transform matrix which will handle that elements x / y placement. So its very likely that if you do a 3D tween on an element and scrollpath.js is trying to change its "top" property, the y property set by GSAP will cause a conflict. 

 

The solution would be to make sure that you don't do any x, y, scale, rotation, rotationX..etc  tweens on elements that are being directly controlled by scrollpath.js. So maybe doing those types of tweens on child elements of elements that scrollpath.js is moving will work. 

 

And as a final note, if you want the scroll positiion to directly affect your GSAP animation, nothing beats SuperScrollorama http://johnpolacek.github.com/superscrollorama/

[des_igner]

Thanks very much Carl, you've been really helpful.

 

That SuperScrollorama looks really cool and kind of what I need. Do you think that I will be able to use it in conjunction with the scrollpath.js?

 

Thanks again

 

Phil

[des_igner]

I'm having problems getting scrollpath and scrollorama to work in conjunction with each other. 

 

It appears that scollorama bases its animations off the default scrollbar, but scrollpath doesn't use the default scrollbar and instead uses a custom one. 

 

If I show the default scrollbar and use it to scroll it doesn't follow the path, but the scrollarama animations work. If I use the custom scroll bar it follows the path, but it doesn't trigger the animations.

 

My head hurts! lol

[Carl]

Yeah, it seems like it would be near impossible to make the 2 work together , sort of like 2 people driving the same car with 2 different steering wheels. 

[des_igner]

Thanks anyway Carl (and nice analogy)

 

I have seen websites that have done similar stuff before, but obviously they're using other things to accomplish it.

[Rodrigo]

Hi,

 

It maybe a way to do it.

 

If you check the demo with firebug or developer tools while you're scrolling up and down you'll see this (this captures are taken wit firebug 1.11.2 in Firefox 19).

 

If you check there's two main elements that are going to change some of their css properties, wrapper and sp-scroll-bar, if you scroll down a little you'll see this:

 

 

And if you scroll to the point where rotations begin to happen, you'll see this:

 

 

As you can see you can track the change of either of those elements in order to get your tweens/timelines going, the only problem is that, as far as I can see and I maybe wrong about this, the best choice will be the scroll bar (class="sp-scroll-handle").

 

So all you have to do is relate the change in the top property of this element to the progress value of your tweens/timelines. The challenge is to find something in the plugin's code to do it and by taking a quick look to it I've found nothing, and if that's the case personally I'll spend my time creating my own solution without the plugin. The other way is to add some sort of Enter Frame event to constantly check the scroll handle's top property and use that to set the progress of the tweens/timeline. Honestly i would go with the second option and in that regard you can read this article to see how you can do it.

 

Now in order to relate the scroll handle position and the progress of the tweens you can check this tutorial I made some time ago.

 

And just like Carl said it would be nearly impossible to get the two plugins to work together in harmony.

 

Hope this helps.

Cheers,

Rodrigo.

[Rodrigo]

Hi,

 

Yesterday I couldn't set an example of my idea, so here it is:

 

http://jsfiddle.net/rhernando/k5gm4/

 

As you'll see i didn't use the code suggested by Paul Irish because on further experimenting you get the same result with setInterval, maybe someone with more experience in this could enlighten us a little more in order to know what's the best choice. I chosen setInterval only because is less code.

 

Cheers,

Rodrigo.

[des_igner]

Hi Rodrigo

 

I'm just trying to get my head around what you've explained, but just wanted to say thanks and that I appreciate you taking the time to explain it to me.

 

Phil

[Rodrigo]

No problemo Phil, if more questions come up, keep asking.

 

Cheers,

Rodrigo.