Using arrow navigation with the Dragabble content

[eloisem]

I'm trying to recreate the function Scroll (Drag & FLick) from GreenSock (https://greensock.com/draggable ) on my website to make an image navigation throught a small city. 

It works great grabbing the image but my problem now is make the arrow navigation work as well as if I'm grabbing the image around. 

I'm a pretty newbie at the .js and read the documentation but couldn't make this work at all. 

Someone could take a look and maybe give me some lights on it?

 

Thanks a lot

See the Pen gPzovO by eloisemonteiro (@eloisemonteiro) on CodePen

[Jonathan]

Hello eloisem, and Welcome to the GreenSock Forum!

 

In that GreenSock demo you will notice that it talks about the ThrowPropsPlugin, to get that flick effect.

 

Taken from that GreenSock Draggable page:

• Don't forget the kinetic-based flick scrolling that's enabled when you load ThrowPropsPlugin and set throwProps:true in the config object. When you drag past the normal limits, the edgeResistance kicks in (you control how much). It just "feels" natural and fluid, much more so than most other options out there.
• To get ThrowPropsPlugin (for the momentum-based features), you would have to join Club GreenSock. You'll be glad you did. If not, we'll gladly issue a full refund.

So in your demo on codepen you are missing the GreenSock ThrowPropsPlugin that is located in the codepen JS panel. ThrowPropsPlugin is a Club GreenSock benefit plugin, but you can test it out for free on codepen.

 

Here is that same Draggable Demo on codepen so you can test and edit the code live. Just fork (copy) the codepen demo example and you can see how teh ThrowPropsPlugin works with throwProps:true

 

See the Pen zDwEk by GreenSock (@GreenSock) on CodePen

 

Let us know if you have any more questions

[Carl]

Not sure if I am understanding the question fully but to get the arrows to work you can just create a TweenLite tween to animate along the x axis like

 

$("#right, #left").click(function () {
                var dir = this.id == "right" ? '+=' : '-=';
                var wid = $("#div1").width();
                TweenLite.to("#div1", 1, {x:dir + 500})
                //$("#div1").stop().animate({ scrollLeft: dir + wid  }, 1000);
            });

 

http://codepen.io/GreenSock/pen/BjxxBg?editors=0010

 

You can modify the values to suit your needs. You probably need some code in there to make sure you don't move the image too far in any direction.