Jump to content
GreenSock

jesper.landberg

Some draggable questions/issues

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Im trying out draggable and it seems awesome. However I got some issues... bounds { minX.... maxX } gives me some weird results. I want to make so that the i cant drag the slider further then the combined width of the children elements. Isn't this where I'm supposed to use maxX? If u check my codepen it's almost like minX and maxX are reversed.

Also, is there any "goto" way of making the draggable moving by using scroll/mousewheel, like on this site that is using draggable? http://www.jonyguedj.com/

See the Pen pWPorK by ReGGae (@ReGGae) on CodePen

Link to comment
Share on other sites

Thanks for the demo.

I set your maxX to 100 and it seemed to work fine.

Have you confirmed that 

 

this.slides[0].offsetWidth * this.slides.length - 1

actually returns the proper number? And if so, I would suggest just hard-coding for now to test that it works.

 

I do not know of a "goto" way to control a Draggable via scroll. You can always tween the target of a Draggable like

 

TweenLite.to(".js-slider", 1, {x:200}) 

 

to make it move.

 

 

 

  • Like 1
Link to comment
Share on other sites

10 hours ago, Carl said:

Thanks for the demo.

I set your maxX to 100 and it seemed to work fine.

Have you confirmed that 

 


this.slides[0].offsetWidth * this.slides.length - 1

actually returns the proper number? And if so, I would suggest just hard-coding for now to test that it works.

 

I do not know of a "goto" way to control a Draggable via scroll. You can always tween the target of a Draggable like

 

TweenLite.to(".js-slider", 1, {x:200}) 

 

to make it move.

 

 

 

Thanks, but whatever I add to maxX does no difference, except on the other end:S.... would u show me a fork of my pen? Not sure I understand how this bounds minX, maxX works.

Link to comment
Share on other sites

Here is a fork. 

maxX is set to 100.

Notice you can only drag 100px to the right.

I added

console.log(this.slides[0].offsetWidth * this.slides.length - 1);

and it shows 4479

so when you set maxX to that value you can drag up to 4479 px to the right. 

Let us know if you were expecting something else.

See the Pen BwZwJg?editors=0011 by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×