Jump to content
GreenSock

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

Control timeline with Draggable (same target)

Recommended Posts

Hi all,

Building off of the question from 

 which related to impacting a timeline that had a separate target than the draggable instance, can you control a timeline that has the same target? For example, an offcanvas menu that may be triggered open via a "hamburger icon" and then can be closed (reversing the timeline) by clicking outside of the menu, but also be able to impact the reverse timeline by swiping it close with Draggable? 

 

In this scenario, you'd be using a certain attribute of the tween (x) along with the current position of `x` in Draggable.

See the Pen BdJNbQ by zslabs (@zslabs) on CodePen

Link to comment
Share on other sites

You don't have to actually drag the element. Check out this example. I'm dragging a div that isn't even part of the DOM.

 

See the Pen ZOgGXB?editors=0010 by osublake (@osublake) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Hey @OSUblake I've added a CodePen example for a reduced test-case and having a bit of trouble. Is the modifiers plugin required in order to interact with the "x" attribute onDrag? After I open the off-canvas menu, attempting to drag it close is very jittery and gets in a state where the timeline progress is off.

 

Ideally this will also have the ThrowProps plugin, but trying to start small. Any pointers would be greatly appreciated. Thanks!

Link to comment
Share on other sites

You forgot the codepen. And I only used the modifiers plugin in that demo to make the images loop and hide the images that were out of view.

Link to comment
Share on other sites

Oh wait... are you talking about the codepen above? Didn't see that you edited that post.

Link to comment
Share on other sites

Wow @OSUblake! That works amazingly well. I'll need to sift through everything there, but that is really great. Thank you very much for taking the time to put that together!

  • Like 2
Link to comment
Share on other sites

One last question, could you explain:

 

$nav.style.width = Math.max(300, window.innerWidth * 0.4) + "px";

 

Since it's changing the width of the nav, figured it'd be good to know why. Thanks again.

Link to comment
Share on other sites

My previous question doesn't actually seem to change anything, so I think we're good there. But, within the following fork of your example:

 

See the Pen LjeZvR?editors=0100 by zslabs (@zslabs) on CodePen

If you try to drag on those links, it looks like Draggable will not run, but I'd still like them accessible when a normal click is done on them. I did find 

See the Pen ByMwwY?editors=0010 by kyd (@kyd) on CodePen

, but based on the date of that pen, wanted to see if you had another suggestion or if there was something native to help with this. Thanks!

Link to comment
Share on other sites

Hey @Rhinogram

 

Did you get this working? I was on vacation and am getting back up to speed on some of the questions I missed.

 

And yes, setting the nav width isn't needed. I just added that for testing so I had a larger area to play around with.

  • Like 2
Link to comment
Share on other sites

Hey Blake,

Thanks for checking back-in. I unfortunately have not been able to get this to work. Links seem to have higher prioritization than the drag event.

Link to comment
Share on other sites

See how it feels with dragClickables set to true. It will let you drag the links, and it should recognize a click once the menu is fully open. 

 

See the Pen QMBzvd?editors=0010 by osublake (@osublake) on CodePen

 

  • Like 4
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.
×