Moving an element along a curved path as user scrolls

Question

I'm trying to make a page where a rocket follows a predetermined path which snakes up the page (the page will load at the bottom) as the user scrolls.

I can animate an element along a path using something like jQuery.path and using SVG's animateMotion but I can't quite figure out a solution where the element would move along that path as the user scrolls.

jQuery Scroll Path isn't quite what I'm looking for as it moves the elements into the center of the page.

I've seen on the TEDxGUC website, they move the apple along a curved path as you scroll down. I can see they're using Raphael.js and an 'animation along a path' extension but I still can't get my head around how they've actually achieved it – I'm not quite a JS ninja just yet.

Any pointers in the right direction would be really appreciated!

EDIT

For anyone still interested in this kind of thing, I stumbled across Skrollr Path, which pretty much does exactly what I was looking for: example

Answer 1

I'm the developer of the www.tedxguc.com website.

I think you're already on the right path (pun intended) with regards to how I got the animation to work with the scrolling. I simply conceptualized the animation as if the scroll bar is a seek bar in a video player.

So I set the height of the page to the length of my animation, such that every 1 pixel my element moves correspond to 1 ms in the animation, as if I was moving in a timeline.

You'll notice the animation set up code at the end of the homepage.js file.

In makeAnim() you'll find a lot of code that looks like this

setAnim(obj.apple,{0:{along:0}, 1000:{along:1}}, start+3200, 1000);

What this basically does is: set up the apple such that it will move from it's 0 (start of the path) to 1 (end of path) and it will do so within 1000px of scrolling starting form the "start" of animation + an offset of 3200 pixels.

I kind of cheated and fixed the code a bit to make it simpler to understand.

Here's a jsfiddle of the earlier concept in development and I hope my comment helped.