Draggable: `scrollTo / moveTo` method

[b.briel 0 Likes (Newbie)]

Hello,

First of all I'm still amazed by GSAP and your work, by far the best animation library out there, thank you guys!

I'm using a horizontal dragger on a project and would like to use side arrows to be able to move to a certain position of the dragger area — without dragging.

 

So, my question is; does a method exists within draggable to go to a specific value in the bounds?

 

Here's my initialisation code:

this.draggable = new Draggable(this.ui.container, {
      type: "x",
      dragClickables: true,
      throwProps: true,
      edgeTolerance: 0.25, 
      edgeResistance: 0.85,
      bounds: { minX: 0, minY: 0, maxX: -Math.abs(this.max), maxY: 0 },
      onDragStartScope: this,
      onDragEndScope: this,
      onDragScope: this,
      onDragStart: this.onTouchStart,
      onDragEnd: this.onTouchEnd,
      zIndexBoost: false,
      cursor: 'inerhit'
});

Note that I'm not using the `scroll` type, but only `x`. Therefore I cannot use a `scrollTo` method.

I was wondering if you had a similar method already in the plugin.

 

I would simply like to add eventListeners to theses arrows and move each time by 200px (for example) the draggable container to the left / right.

 

Thank you a lot for your work and help.

Wish you the best for 2016,

Baptiste

[Carl 9,066 Likes (Superhero)]

Without seeing a demo, my best guess is that you would just use a tween animate the x of that element. When you are done you would call update() on the Draggable so that it knows that an "outside force" changed its values.

[b.briel 0 Likes (Newbie)]

Perfect! Works like a charm, thank you very much Carl!