Jump to content
Search Community

Responsive draggable menu

gareth test
Moderator Tag

Go to solution Solved by OSUblake,

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,

 

I have simple menu that I want to drag from 5% of the screen to 100%. 

// changing this to "100%" does not work
var maxX = 320

Draggable.create(".menu", {
  type:"x",
  throwProps:true, 
  edgeResistance: 1,
  maxDuration:0.3, 
   bounds: {maxX:maxX, minX:0}, 
    snap: {
    x: [0, maxX]
  }
  
});

The menu works fine if I supply a pixel value for the bounds and snap points. It is possible to use % ?

 

thanks,

Gareth

See the Pen xOdYqY by garethj (@garethj) on CodePen

Link to comment
Share on other sites

ok so I can just grab the screen width (but will have to update on resize)

var maxX =  window.innerWidth;

which brings me to my next question how do you control when the snap is triggered ? at the moment it looks like you have to exceed 50% for the menu to snap either way. Is is possible to change this to say 25% i.e if I drag past 25% the menu will snap to 100% ?

Link to comment
Share on other sites

  • Solution

You can use a function...

See the Pen bZWvja by osublake (@osublake) on CodePen

 

If you're trying to create a swipe effect, I think it feels more natural if you don't use positional constraints. I use the velocity tracker to determine the direction to move it if it exceeded some number of pixels, similar to how hammerjs does it.

  • Like 2
Link to comment
Share on other sites

  • 4 years later...

Hi!

How create same thing with gsap3 and inertia plugin?

See the Pen PoZVMeO?editors=0011 by -greg- (@-greg-) on CodePen

 

If i set snap like x: Math.round(gsap.getProperty(element, "x") / gridWidth) * gridWidth, (like on example GSAP

See the Pen zDwEk?editors=1010 by GreenSock (@GreenSock) on CodePen

) its start snap on center of the menu, but need start snap on minSnap

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.
×
×
  • Create New...