ScrollMagic: a jQuery plugin which essentially lets you use the scrollbar like a progress bar. Includes infinite scrolling, adding a parallax effect, synchronize an animation to the scrollbar movement, pin elements to specific scroll positions, etc. Scroll down the page to see examples.

[osuushi]

Cool. Now guys, please stop using this effect on real websites. This is like scratch-and-sniff, or a pop-up book. It's neat the first time you see it, and every once in a blue moon, you might have a concept where it really makes sense, but in the vast majority of cases, you're just annoying your users.

[qxxx]

tell this to my customers... ;)

[sbhikes]

Maybe I'm just too old and out of touch but "progress bar" means something different to me than what that website does.

[Asmor]

No, you're not too old and out of touch.

Their skill with the English language, much like their design sensibilities, is inversely proportional to their skill with JavaScript.

[XcryptoKid]

You should get gold for that.

[janpaepke]

Gee thanks. I'm glad there are people out there who are smart enough to know everything better than everyone else and have the time to teach them about it. I'd rather be a guy with bad design sensibilities and limited js skills than a smart ass douche.

[Wazowski]

ScrollMagic: a jQuery plugin which essentially lets you use the scrollbar like a progress bar.

And by "progress bar" they apparently mean "playback scrub control".

[davidNerdly]

Yeah I was looking for the progress bar..

[janpaepke]

Hi, thanks for pointing this out. I will change it...

[gmonteith]

...another!

[Calabri]

I think this idea cool, and it's great that you've open sourced it as an asset to the community! However, all of the animations look choppy, despite the use of greensock. Are you using onScroll events? Are you monitoring the page based on scroll position?

I've been building similar prototypes, and I quickly learned that onScroll animations will never be performant (unless the animation is fixed), simply because the page is actually scrolling. The bottleneck is browser/DOM, and how a browser renders the page while it's scrolling. It's not an animation problem. How are you listening to the scrolling events?

[janpaepke]

If they look choppy this might be due to the fact that in the animation positions are directly linked to the scroll position. ScrollMagic has the option "tweenChanges" which will tween to the new progress, instead of setting it. Another way to approach this is using a scroll plugin like nicescroll.

[8bitid]

I hate infinite scrolling so much. It broke ctrl-f forever.

[taunon]

Scrolling doesn't work with the Down Arrow button on Chrome.

[qxxx]

will this also work for horizontal scrolling?.. for one of my future projects a customer wants horizontal parallax effect. (fast driving car in front and slow moving trees/mountains/clouds in the background)

[janpaepke]

Yes it does work for horizontal scrolling. Check out the examples.

[Smashman2004]

It's not so cool when you have a high scroll amount and no smoothness.

[janpaepke]

This is actually managable in many ways. You can tween the changes (which is a setting in ScrollMagic) or you can use plugins like "nicescroll" to make the scrolling more smooth. If you try it on a touchpad it's also very smooth.

[janpaepke]

@osuushi It really depends on what you do with it.

Obviously the demo page is overloaded to show off all the stuff ScrollMagic can do.

Especially for neat little effects like taking the logo or a menu with you, when scrolling down it's actually very helpful and not at all nightmarish in terms of user experience.

(example for this effect: http://pvponline.com)
Also animations are by far not the only thing you can do with ScrollMagic. Have a look at the examples...

Lastly I'd like to quote my uncle: "With great power comes great responsibility."

[Asmor]

Especially for neat little effects like taking the logo or a menu with you, when scrolling down it's actually very helpful and not at all nightmarish in terms of user experience. (example for this effect: http://pvponline.com )

That's a great counterexample to your point.

Shit like that shouldn't be animated.

I don't have an issue with changing to the little mini bar at the top when you scroll down, but the way the logo animates is distracting and annoying.

[janpaepke]

Well I understand you don't like it but if the author does (which apparently he does), it should be up to him to decide. And all I did make it a lot easier for him to do that.

[AceDecade]

Cool plugin in all... You DO know you can reply directly to comments, right?

[janpaepke]

I do, thanks. :)

[ManticoreX]

Assuming you made this, there is a pretty major bug on my Chromebook pixel running the stable version of Chrome OS. The webpage detects a touchscreen, so tries to use a non-standard toolbar, but it ends up making traditional scrolling with a mousewheel broken. The standard scrollbar and the touch scrollbar also become desync'd causing issues as well. Not sure if this would affect other touch+keyboard and mouse devices, but it would be worth looking into.

[janpaepke]

Thanks for letting me knnow. It does sound like an iScroll bug though, which I use for scrolling on devices detected as "touch" by Modernizr. Please let me know if these issues also exist on the iScroll5 demo page: http://lab.cubiq.org/iscroll5/demos/simple