Question

Im trying to make a simple scroll path using this plugin “http://joelb.me/scrollpath/” and all I want to do is make a simple line, without rotations, arcs etc only I cant seem to understand how this works, nor find a tutorial on the plugin!?

I want a path like…

                __________________
 ______________|

I’ve written the following with no luck…

Can anyvbody see what im doing wrong?

.moveTo(400, 50, {name: "one"})
  .lineTo(400, 50, {name: "two"})
  .lineTo(400, 50, {name: "three"})
  .lineTo(400, 50, {name: "four"})
  .lineTo(400, 50, {name: "five"})
  .lineTo(400, 50, {name: "six"})

Answer 1

You seem to use the lineTo thinking arguments are relative values (i.e. ‘move to 400;50‘), but those are absolute, so your example moves to 400;50 and stays there.

Try something like this:

path
  .moveTo(50,100,{name: 'one'})
  .lineTo(400,100,{name: 'two'})
  .lineTo(400,50,{name: 'three'})
  .lineTo(800,50,{name: 'four'});

Additionally, when you init the plugin, pass drawPath: true as option, so you’ll see how the path is implemented:

$(".your-container-element").scrollPath({
  drawPath: true,
});

---

you can find (some) documentation here: https://github.com/JoelBesada/scrollpath