title: Moving an element along a curved path as user scrolls
body: <p>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.</p>
  
  <p>I can animate an element along a path using something like <a href="https://github.com/weepy/jquery.path" rel="nofollow">jQuery.path</a> 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.</p>
  
  <p>jQuery Scroll Path isn't quite what I'm looking for as it moves the elements into the center of the page. </p>
  
  <p>I've seen on the <a href="http://www.tedxguc.com/" rel="nofollow">TEDxGUC</a> 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.</p>
  
  <p>Any pointers in the right direction would be really appreciated!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>For anyone still interested in this kind of thing, I stumbled across <a href="https://github.com/Prinzhorn/skrollr-path" rel="nofollow">Skrollr Path</a>, which pretty much does exactly what I was looking for: <a href="http://prinzhorn.github.io/skrollr-path/" rel="nofollow">example</a></p>