jQuery Scroll Path

February 9th, 2012 :: Web Development

A computer mouse

I released a jQuery plugin a couple of days ago and I haven’t had time to write about it here until now. The plugin is based on a slightly crazy idea, but it has been getting some good response on Forrst and Twitter (my follower count has tripled quadrupled since the release).

Most people seem to think that it’s a pretty cool plugin, but struggle in coming up with good practical uses of it. It might not be of much use on any “serious” website, but I think it can create quite a nice effect on personal portfolios and presentation pages, if used creatively.

So what does the plugin do exactly? Well, it lets you define a custom path for the window to follow when scrolling up and down, and you can also throw rotations into the mix. You draw the path with methods that work exactly the same way as the canvas methods for drawing lines and arcs.

To make it easy to see how your path is coming along, I’ve added an option to display the path on an overlaid canvas. Enable this while your building your site, and you should have no problem with shaping the path exactly the way you want it.

After creating the demo I’ve learnt that the way you present your social “follow me” and “share” links can have a big impact on the rate of people that actually click on them. This time, I decided to only include links for following me and sharing the page on Twitter, completely disregarding all other social networks. This increased the amount of social shares tremendously compared to previous demos that I’ve made. Also, instead of using the default tweet button, I made my own custom tweet link that fits in better with the design, using my previously described technique. I’ll be keeping this in mind once I get around to re-designing parts of this blog.

The source code and documentation is on GitHub. Let me know if you use the plugin to build something creative, I’d love to see it!

Demo

  • http://www.amazingthings.in/ Aakash Doshi

    This is some killer stuff buddy!! totally impressed <3

  • http://rawdesigns.net/ Rob Abby

    Nice work!  Lot’s of creative uses for this.

  • greeneggs

    really neat idea, could it be used within a div that is not fullscreen? I’d love to use it so that if the mouse would scroll the path only wilest it was inside a div (600×400 for example) then outside this div the page would scroll as normally expected.
    I’d even be happy to show/hide/lose the scroll bar.

    possible? deireable?

    • JoelBesada

      I haven’t really built the plugin with other uses than fullscreen in mind, so I don’t think it would work in your case. You could of course try to edit the code to your needs, if you know your way around Javascript well enough. 

    • greeneggs

       Thanks for getting back on this.
      I’m no .js man by far – it’s all hack’n'slash client side.
      I’m thinking of how to integrate this in larger project and for this want to be able to ‘get in’ & ‘get out’ of this in other ways than pages. would you have any thoughts on if/how it at the end of the path, when I continue to scroll down the wrapper div scrolls up as an element/page of the curtains.js (http://curtain.victorcoulon.fr/)

      I would like to say i’m having a brain-freeze but I simple don’t know js/jq enough to know the possibilities of merginge these two pluigns.

      and advice would be greatly appreciated  (other than learn js/jq as this is in the process ;) )

    • JoelBesada

      What you could possibly do is use an iframe for the scrollpath part of the page, like this http://dabblet.com/gist/1966261. As you can see, you can scroll the iframe and the page body separately. 

      However, to continue scrolling the body after the path has reached its end, you’d have to put a callback function that rebinds the iframe’s scroll event back to the body (curtain.js). Since I haven’t worked much with iframes, and never tried out curtain.js, I’m not entirely sure if that would be possible.

      You have brought up an interesting case where having the plugin work for other than fullscreen elements would be useful, so I’m going to put that feature on my to do list. I can’t promise I’ll ever get around to implementing it though, but you never know. ;)

    • greeneggs

       many thanks Joel, I obviously wish you all the success with that ;)
      I am currently using an iframe of a curtain element and use a hover element on th eifram to let peopl know that in order to continue along the path they simply scroll outside the iframe area. it works well enough (better if it could get curtain to be an element on the path and the path to stop scrolling whilst inside this div – then no iframe needed )

      the two ideas I have been describing can really be summarised as…
      1: scrollpath contianing elements as ‘node’ along the path – each a self contained page that halts the path scrolling until a callback is received from the inner html to (seamlessly) takeback control of the scroll again.
      2: scrollpath is a ‘node’ in another scripts chain. like a page within a page so that would work as a tabbed item or in the case of curtain – a singe ‘page’ of curtains stack.

      just my thoughts – thank you for the script to date – it is beautiful.
      FYI: I’m using it as a resume site – a timeline of my life/career path. I’ll add the credits to you & others on the js side for sure. I’m a designer/php dev. not .js (at the moment).

      take care.

      ps; can the path be forced on at the start and can it’s z-index be changed to behind the elements?

    • greeneggs

       found both the z-indez and the visible path (it’s a toggle of the css display – how dub was I ;) )

    • JoelBesada

      I’m glad you figured it out :)

  • greeneggs

    playing with scrollpath again and have a few more ideas to add to my wishlist if you don’t mind me saying so…

    path position & rotation debug divs:
    The creation/position of path elements could be made easier if you automatically added div’s along the path’s sections. when defining a section the user could add a variable for number of sub-segments (vertices) i.e 3 = split line/arc into 3  and possibly even an ease-in/out weight variable.

    each vertex could have a procedural #id that automatically repositions/orientates any corresponding html div with matching #id to it’s position/rotation.

    The html deivs css would then be used to offset the div’s position/orientation relative to the vertex.

    I am sure these are big wishes but your work has such great potential I fear it would be used all too often out of the box or unimaginative paths because of the current method of path creation.

    take care, have a great day.
     

    • JoelBesada

      Having a feature that automatically positions elements along the path would definitely make the plugin easier to use. Since you already have a way to name different sections of your path, a feature that automatically snaps elements with the same ID to those sections should be easy to implement. This would also easily allow developers to set up a default layout for users with Javascript disabled.

      However, I’m currently in the middle of learning Ruby on Rails so that I can start working on a slightly larger project that I have in mind. This means that I most likely won’t be adding much to the plugin for a while. We’ll see how much time I have in the future to keep working on this, as there certainly are many things that still can be improved.

    • greeneggs

       thanks for listening to my ramblings :)
      you have fun with ruby and I’ll keep an eye on your site from time to time :)

  • http://www.web-expert.it/ Marco Sors

    Dear Joel,

    I like very much your plugin so I’ve decided to play with it building a small medieval adventure of an italian knight: http://web-expert.it/medioevo/index.html

    I hope you appreciate the experiment even if the language is obscure for you. As you can see, I’ve left the same path of the demo, but I’ve added a gmap iframe on the background, an old paper effect, some html5 media, icons and description to give it a narrative structure. 

    Compliments for your great job! I’ve spent some nice hours playing with your plugin, thanks.

    Ciao,
    Marco

  • http://twitter.com/vpfuentes Victor Fuentes

    Love it man. Just stepping into the jquery spectrum and your plugin is as impressive as it is educational. That snapping feature sounds great as well if it could be done in the future. Keep up the great work, thanks a ton.

  • Vijay Chakravarthy

    This is an awesome concept!! You could redo most of http://johnbhall.com/iphone-4s/ using this in a very elegant manner.

  • Marioescc

    Sos otro nivel, que excelente está. Felicidades. 

  • greeneggs

    hi again Joel,
    I’m making great progress on my use of your scrollpath and would like to ask if was only a small thing, could you add the ability to “ignore” or “counter” the rotation on elements with a given class. i.e. apply the opposite rotation on elemented with the class “noRotate” os that it stays aligned with the screen despite the rotation of the canvas. the position is the same not the roate.

    many thanks for listening.

    • JoelBesada

      I’m sorry but I don’t have much time to work on the plugin currently. As I’ve said, there are many things that could be added to the plugin to make it better, but my time is limited so I have to prioritize other things before this. 

      I hope you understand.

    • greeneggs

      no worries at all Joel,
      take care.

  • Ashok

    It’s not working in ie :(

    • JoelBesada

      You can try it out again now, I fixed the IE issues in the demo.

    • Ashok

      Great job Joel, thank’s for that fixing bug :)

  • Ellec

    awesome script, seriously!
    it makes sense it doesn’t work in ie, i just think there should be some kind of fallback for it. i’d love it if it could at least go to the selected div when i click on the corresponding number. any idea?
    (sorry for my english, it’s not my first language)

    • JoelBesada

      I changed some things with the demo before and must have forgotten to test it in IE. I went back and fixed the issues that were preventing the demo from working, so it should work fine now in IE 7+. 

  • Mydnic

    Hi Joel, 
    This is incredible ! I love it! 
    I’m playing and trying some test with an interface like this, and I wondered if it was possible to attach the path to the bottom of the page ??
    Is the scrollpath allways fixed to the middel of the screen?
    I would actually like to use the rotation scroll in order to make thing disappear and other things appear on the screen. I don’t know if I’m pretty clear (sorry for my english) =)
    I tried to fix my div to the bottom, but it stays on the middle of the screen…Thank you for your job and thank you by advance for answering my question.

    • JoelBesada

      The plugin always centers itself on the path, there’s no setting at the moment to change that.

      Sorry for replying so late.

    • Mydnic

      Thank you for answering,
      may the force be with you.

  • Charlesbenston

    What an great and easy to use plugin! 

    One question though, is this plugin going to be optimised for mobile (especially tablet devices) scrolling? I’ve been testing some stuff out on my ipad and can’t get it to work properly.

    • JoelBesada

      I haven’t put any work into getting this to work on mobile. For now, I’m working on some other things, so this plugin is unfortunately not very high up on my priority list. 

      However, I might take another shot at adjusting the plugin to use the native scrollbar, which should solve a bunch of problems and make the plugin work better with mobile devices. 

    • MichalGorczyca

      Hi Joel, did you take a shot at this mobile swiping problem? ;) it would make the plugin perfect! thanks in advance

    • matt

      This might help… try setting the viewport to the following:

    • http://twitter.com/ElienDauwe Elien Dauwe

      Hello, 
      Are there any solutions to fix this mobile scrolling problem? I’ve set the viewport and that works, but I want the scrolling to do the same thing as swiping. Is that possible?
      Either way, I love this plugin, building and drawing my own paths and such!

  • Shawn

    just wondering how to make it autoslide?

    • JoelBesada

      There’s no built in function for that, you’ll have to implement it yourself.

  • greeneggs

    has anyone got the path to show in chrome yet? not even the demo here shows the path :(

    • Patrick

      Works fine for me in Chrome 19, in fact the entire scrolling process is a lot smoother in Chrome than in FF, it could be because I have quite a few tabs open in Firefox though.

  • Patrick

    Hi Joel,

    Great work on this plugin. I noticed from the comments you don’t have much time to work on it but one suggestion I would make for a new version would be to include some zoom in out +/- links on the page. When I zoomed out on the page and then continued to scroll though with the path displayed it gave me a much better idea of how the path was actually being followed. Just a thought.

  • Tomasz Jagusz

    This plugin is awesome :D I’m thinking of thousand ways of using it :)
    But one thing wonders me: can I do with Your plugin effect like this: http://artofflightmovie.com/ – use webpage scrollbars to move on path?

  • Linelsedillo

    hi can you help me with your scroll path? i want to remove the top and left of wrapper so i can customize it with my layout.. how can i be? please

  • Will Slaton

    Thanks man!  This is exactly what I was looking for.  I currently have some basic up and down scrolling movement using basic html and a bit of js.  But want to take my site to the next level.  I can design all day, but am still considered a newbie when it comes to coding… especially js.  I am a creative, so this will make a great contribution to my portfolio site!!!

  • http://twitter.com/AspectEleven Andrew Terpening

    Hey, just wanted to thank you greatly for your script, and also to let you know that I have used it on my company website — http://aspecteleven.com  Fits perfectly with my site, I think :)

  • inputile g

    Hi,

    I try programmatic call scrollTo but this work only 1 time, second time don’t scroll

    I use this:
        $.fn.scrollPath(“scrollTo”, ‘start’, 1000, “easeInOutSine”);
        $.fn.scrollPath(“scrollTo”, ‘description’, 1000, “easeInOutSine”);

    First scroll to “start”, second don’t scroll

    I have this function:
    function startAnimation(el, time){

        setTimeout( function() {
       
            $.fn.scrollPath(“scrollTo”, el, 1000, “easeInOutSine”);

        }, time);
    }

    for make scroll automatically.

    Any suggestion?

  • Luiz Fernando

    Hello Joel, very good script!

    I have a difficulty, can you help me?

    I am developing a website and it’s nine tables in the central will have links to each frame and these frames will have a link back to the central framework.

    But the client does not want to do this zig-zag, or to return directly to the frame.

    I’m giving you a picture for you to understand!

    I hope you can help me, thanks!

    • Luiz Fernando

      Forgot to say, I’m using this:

      .moveTo(1512, 967,  {name: “home”})        –> Frame 5.lineTo(504,  322,  {name: “regulamento”}) –> Frame 1.lineTo(1512, 322,  {name: “inscricoes”})   –> Frame 2.lineTo(2520, 322,  {name: “faq”})              –> Frame 3.lineTo(504,  967,  {name: “oquee”})          –> Frame 4.lineTo(2520, 967,  {name: “projetos”})      –> Frame 6.lineTo(504,  1612, {name: “contato”})       –> Frame 7.lineTo(1512, 1612, {name: “formulario”})   –> Frame 8.lineTo(2520, 1612, {name: “imprensa”})    –> Frame 9.lineTo(1512, 967,  {name: “end”})             –> Frame 

    • Vishal panchal

      HI Joel, really great script, i have same problem as above….
      can any one help me for same…
      Luiz did u solve it….

    • Bergslay

      Hellow Joel,  i have same problem 

  • Medriloth

    Thx for this script, it helps alot in my projects :) Btw, is it possible to bind an element to path, lets say a image, which follows the path?

  • magda

    great work and sooo much creativity… btw, skullcandy used it on their site and efect is awesome :)
    http://eu.skullcandy.com/supremesoundjourney/

  • http://twitter.com/pg_g Paige Guthrie

    Someone just released a new infographic based on your scroll path. Like it?

    http://www.cheapinsurance.com/history

  • Murlidhar Chaugule

    Hello I want the next and previous arrows for the scrollpath. Is is possible?

  • http://www.facebook.com/bird.tom Tom Bird

    I think its a great idea, I’ve seen this method used before and I find the best use is in applications where you are telling a story. Here’s a cool application though I don’t think they use your plugin: 
    http://artofflightmovie.com/

  • http://www.facebook.com/iainrmcdonald Iain McDonald

    Great script, check this out: www.etihadairways.com/yasmarinacircuit

  • http://www.facebook.com/iainrmcdonald Iain McDonald

    Pretty good isn’t it?

  • Steve

    This is very cool! thanks man

  • Thierry PHILIPPE

    Developping a website based on scrollpath, I have a problem with scroll bars (on iframes, or divs with overflow). Scrollpath detects mousewheel for it’s own scroll so it doesn’t work anywhare else :-(.

    Any idea to bypass it (in particular with fancybox opening ajax content) ?

    Thanks a lot !

  • Vishal panchal

    Hello Joel, very good script!
    I have one doubt, is it possible to use 2 path or is there any option to break path….

    I hope you can help me, thanks!

  • steve

    Hi Joel,

    Just a quick question… How do you make the path visible by default? can’t figure it out… Thanks a lot in advance… 

  • Zhong0406

    Cool!

  • http://www.facebook.com/will.denton.9638 Will Denton

    Hey Joel this is a really fun script, I was wondering if you could help me with a project. I’d like to have a full page image background that moves as you scroll through the path. Just like the previous example Iain McDonald posted. If you or any else have any ideas as how to get a big background image to move in according to the path, I’d really appreciate the help, thanks!

  • http://www.facebook.com/will.denton.9638 Will Denton

    Sorry I posted with out signing in! that last post was mine just wanted to put a name and face to the anonymous post
     

  • http://twitter.com/bloobleebloo Abby Sanchez

    Thank you so much for this!

  • http://twitter.com/iDavidStrada David Strada

    Great script.

  • Thierry PHILIPPE

    I’ve done this website using scrollpath : http://www.agedordujeuvideo.fr

    • Kyle Jackson

      OMG, this is amazing. How did you achieve the 3D effect on the 05-12 page? Do you have a link to a tutorial, perhaps?

    • Thierry PHILIPPE

      Thanks a lot, I’ve used CSS3 3D transforms playing on the Z axis, it’s quite funny and not so difficult to achieve in fact :-)

    • Pete

      Awesome site both in design and content, took me back to my youth seeing all those old machines

  • avnish

    this is so nice scripting pl. give me more nice scripting 

    avicreata@gmail.com

  • Michal

    Did anyone solve the mobile swiping /scrolling problem? :(

    • aziraphale87

      If the problem you refer to is what I think it is, this should fix it:
      // Disable panning around the page on touchscreen devices (as this is totally incompatible with ScrollPath)$(document).one(‘touchstart’, function(){    $(document).on(‘touchmove’, function(ev){        ev.preventDefault();    });        // Also hide the scrollbar    $(‘.sp-scroll-bar’).hide();});

    • Michal

      Thanks for your reply, but I would rather make touch events work properly :) It would be great if touch swiping would scroll the path just like it works on a standard scrolling.
      At the moment, mobile-device users have got only links to specific stage, nothing more :(

    • aziraphale87

      I totally agree – so I’ve spent a few hours today writing in some touch event support for this library: https://github.com/aziraphale/scrollpath

      I’ve also pulled in some other modifications that others have implemented on Github, including adding Bezier curves, being able to style the line, etc.

      Currently my touch code simply lets you drag the page around the screen, but there is no kinetic/inertia scrolling, so you can’t “flick” the page to scroll a long way at once. I’m still working on that, but it’s a somewhat larger task than the other functionality.

      Keep an eye on my github repository for updates :)

    • Michal

      Whoa! You are awesome, I owe you a huge beer :) I will try to implement your code to my project tonight and hope it will do the trick ;)

    • aziraphale87

      Let me know if you have any problems with it or find any bugs in my implementation. I’ll be using it at work tomorrow, so it’d be nice to know about the bugs ;)

      Always nice to know that others are benefiting from my work :>

  • Anti2013

    mirass.ir

  • http://www.facebook.com/rohit.siju Rohit Siju

    OMG !!!!!!! dude i jealous of  you… :)

  • Anti2013
  • http://profile.yahoo.com/2SUKAECK7XEUJ6NWL4CYME4IR4 Praveen

    asd

  • http://profile.yahoo.com/2SUKAECK7XEUJ6NWL4CYME4IR4 Praveen

    Hi Joel,

    I have used it on my website here:

    http://www.speedychow.in.demo

    A lil help will be appreciated i want the black stipes in the back also to mover with the content.

    Thanks

  • Sourena 321go
  • http://www.facebook.com/profile.php?id=646405873 Filippo Tacchini

    tnx for script i have a question. how can i show always path?

    • Peter Mitchell

      Change the following in style.css

      .sp-canvas
      {
      display: inline-block;
      }

  • SP

    Nice, but…it seems to completely break on iOS (safari and chrome)?

  • wezyr512

    Hi Joel,
    Thank you for the script. I wanna use it on my site but I have one question. It’s possible to make pause in scrolling along path for another action with using scroll? I want use scroll for another action in some point of path but I don’t know how stop script. Thanks a lot. Regards

  • Joel Desamero

    Hi Joel,

    Thanks so much for releasing this cool plugin. We utilized your plugin for this project:

    http://www.support.sickkidsfoundation.com/site/PageServer?pagename=camp_13_home#ad-image-0

    We don’t have a crazy scroll path (basically horizontal scrolling), but your plugin made it easy to choreograph all the other elements.

    Cheers,
    Joel

  • AR

    I used this for my project at university. Got a 1st for it! http://andrewrapps.com/scrollpath

  • Ken

    Really love this style! I wish to utilise it in my portfolio and would of course give credit to you as the original inspiration :). Unfortunately after downloading it through GitHub, I cannot seem to get the Paths to show like how you did via http://joelb.me/scrollpath/, in fact the first set of downward pointing arrows don’t even animate when I preview it using Dreamweaver CS5 (using Chrome) and there isn’t an option for me to Show/Hide Path. So I’ve tried to set the default plugin settings for thedrawPath to be true – but sadly nothing shows up. Anyone have any ideas?

    Much appreciated :).

  • kiyan

    sub domain free for web you ::: http://www.3×2.ir

  • amit

    sir can you pls tell me how to make scroll path go in up ward dirction pls

    • Peter Mitchell

      create a lineTo statement above the start position, depending where you start this may have to be a negavie number, if it is an arc then again select true for anticlockwise and false for clockwise, hope this helps.

  • Martin B. Levy
  • Cornellia

    Hi, I don’t know if anyone already solved this, but is there a possibility to create more than one path and move multiple objects on the same page with this plugin? I’ve been trying to figure it out for hours without any success.
    But anyway, awesome stuff!!! :-)

  • Martin B. Levy

    Excellent!

    rider.martinblevy.com

  • Rodrigo Brzoski

    I create with this plugin horizontal movements?