Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ektorp

Draggable snapComplete? and browser resizing issues

Go to solution Solved by GreenSock,

Recommended Posts

I am having some strange issues come up with a basic set up with Draggable. I am creating a simple carousel-like set up with Draggable to swipe through page panels. It is working for the most part but there are some issues. On page load, it needs to default to PANEL 2 which it does.

 

1 - There are top tab items that when clicked, they slide to the appropriate panel as expected using simple GSAP. But once a tab other than the first (PANEL 1) is clicked, and I attempt to drag the panels, the panels get shifted and disoriented.

 

2 - Resizing the browser creates an issue with the draggable panels. Before doing any dragging, if you click any of the tabs, and then resize the browser, everything resizes accordingly and is fine. But once you Drag the panels, and then resize the browser, then panels get shifted and disoriented again.

 

3 - Is there a snapComplete event? I looked through the documentation and could not find anything that resembles such an event. If you click a tab it slides to the appropriate tab and sets the active tab. The active tab needs to also be set when the Drag and Snap is complete. How would this be done with no SnapComplete-like event? I have a function for this, (ie. setNav(1)), but do not see how or where I can use this with Draggable.

 

Any help and assistance with getting these issues resolved is very much appreciated.

See the Pen GRvgvGx by bdang (@bdang) on CodePen

Link to comment
Share on other sites

  • Solution

That's because Draggable uses "px" units but you appear to be doing animations using "vw" units. To resolve that, you could simply set the units accordingly using gsap.getProperty() which allows you to specify the unit you'd like it to use, like this: 

See the Pen VwzYQPd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I think you were looking for the onThrowComplete method. 👍

 

Thanks for being a Club GreenSock member 🎉

  • Like 2
Link to comment
Share on other sites

Many thanks Jack for your help and assistance.

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.
×