usheeen
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by usheeen
-
I prefer #2 Just to clarify... a draggable type: "x" will report a lockedAxis = "x" when dragged horizontally and a lockedAxis = "y" when dragged(scrolled) vertically. And vice versa for type: "y". This solution is great: - it is simple and flexible (easy to explain) - no user expectation for matching scroll/scrollEnd events - in general I think events are more difficult for users to grasp than simple attributes or methods re: default behavior When you put it like that I agree. Thinking of another practical situation, imagine you're using Draggable to create a volume slider. You wouldn't want this to block vertical scrolling but you probably would want it to lock axis. Out of interest, do you think you will have any issues for users' upgrading to this new default behavior?
-
I dropped this into my project and it mostly just worked One tweak I made was to lock the draggable's horizontal movement when the page is being scrolled vertically. You can see how I roughly implemented it here: http://codepen.io/oisinlavery/pen/ogPaKm This solution works for up / down but fails for diagonals. For example I couldn't figure out how to find out which axis is actually locked when the initial direction is left-up. - Could you expose the Single Source of Truth instead of me imperfectly recreating this logic? - Alternatively make this locking behavior a setting? A couple of other thoughts: - Do you think this new behavior should be the default? (personally I would say NO) - Should you just expose more data and we create the logic or should this be part of Draggable? I'm delighted that I was able to drop in the new version and it just worked but I am also wary of making Draggable into something overly specific. I think you have done a wonderful job of finding the balance so far so I'm confident you will find the best solution.
-
Yes of course, I can see why you do this - in many cases scrolling the parent isn't the desired behavior. Perhaps a first step would be to provide a setting that allows events through. An accompanying method to toggle this on the fly would also be useful. I think this would add flexibility without turning Draggable into another javascript carousel plugin. Autoscroll looks great, I'll be on the look out for a project that requires it
-
Thanks Jack, I realize it is probably not a trivial change, to make this work. However this is such a common design pattern in apps that it seems important for Draggable to have this functionality. Most of the Draggable examples show a small draggable element inside a large container. However, 99% of our use cases are for "larger" draggable elements, for example: - slide up panels (Google Maps) - menu drawers (Material Design) - carousels (G+, Inbox, Facebook, Twitter, etc.) These elements generally have scroll requirements of their own, either internally (menu drawer needs to drag out from the side then have it's own content scroll vertically) or externally (carousels). While Greensock javascript scroll performance is second to none there are many occasions where native browser scrolling is essential.
-
So basically we are using the onDrag event to update the scroll position of the natively scrolling container. Sweet! I scribbled this down as a possible solution last night before I went to sleep, thanks so much for hacking on it for me, it's great to get consensus! That said, I'm still interested in hearing about how / if it's possible to not block the events at all. We're happy to modify the Draggable.js code to make this happen, if Carl could point us in the right direction
-
Another behavior I've noticed is that even when I've killed the Draggable instance, the scroll events still get blocked. To see this just uncomment line 21 on the Codepan javascript file.
-
I touched on this in a previous posts but am still to find the perfect solution for mixing Draggable dragging/scrolling with native browser scrolling. 1. Open the attached Codepen 2. Emulate touch events - open Chrome inspector and emulate a device such as a Nexus 5 3. Alternatively view the Codepen on a device 4. Alternatively view the screen cap below Basically, you will see that it isn't possible to scroll the page vertically when the drag starts on the Draggable carousel (blue blocks). I've examined Draggable.js source code but I can't figure out where you the relevant scroll / touch event are being intercepted. Could you point me in the right direction? I know one work around is to use a second Draggable to control vertical scrolling but this isn't an option for us, we need native browser scrolling when scrolling vertically.
-
Drafted a reply but neglected to send... Thanks for adding these features, I'm particularly interested in a users intent when they are dragging so getDirection method will be very useful.
-
I didn't really give you a use case to justify this request so here it is: I have a carousel of cards, when dragging horizontally I want them to move freely with dragResistance = 0. Dragging vertically dismisses the cards so I want some resistance.
-
It would be really useful to know which axis a draggable is locked to. Would it be possible to expose the lockedAxis variable from Draggable.js ~ line 1231. I've been reimplementing it as a utility function but better to only calculate once. Every little counts towards performance In the meanwhile if anyone wants util function to calculate locekdAxis, here it is: function AxisTest(){ var axis, startingX, startingY, xDiff, yDiff; this.set = function(x, y){ axis = undefined; startingX = x; startingY = y; } this.update = function(x, y){ xDiff = Math.abs(x - startingX); yDiff = Math.abs(y - startingY); if(!axis){ if(xDiff > 3){ axis = "x"; } else if(yDiff > 3){ axis = "y"; } } return axis; } } To use simply set( ) onPress and update( ) onDrag.
-
Types of Animations Desired for Tuts+ TimelineMax Series.
usheeen replied to GRAY GHOST's topic in GSAP
If you want an example of some really neat material design inspired animation, check out my colleague Jongmin Kim's project at material.cmiscm.com It's mostly vanilla javascript + canvas but could certainly be done with TimelineMax. It would be interesting to see if Greensock could achieve the same performance. I'm also really interested in seeing Draggable powered timelines, for example I'd like to see how you would achieve a slide out side menu (with drag from edge to open, and drag to close). Also more practical Material Design components like the menu fly-out, button ripple, checkbox transitions, etc., checkout google.com/design for inspiration.- 8 replies
-
- 3
-
-
- gsap.
- timelinemax
- (and 7 more)
-
Great that works perfectly, and you can see the updated Pen here: http://codepen.io/anon/pen/NPjJoL Thanks for your help Jack.
-
Bump... is this a bug?
-
I solved this by nesting Draggables - the outer is of type: "x y" and inner type: "scroll". One thing that would be so useful is to allow lockAxis to work between 2 Draggables, are there any such plans to make this work?
-
Check out the attached codepen on a mobile device / Chrome Inspector emulator. Basically clicks to the nested anchors are being blocked - only happens on touch devices not desktop - only happens on type: "scroll" not "x y" Is this a bug or desired behavior?
-
Ok, let me try to explain... If you look at my example, the inner text of .page isn't scrollable on a touch device because the parent element .pages has a Draggable attached which seems to be intercepting the touch events.
-
Is it possible to have natively vertical scroll elements within a horizontal Draggable element?
-
Thanks for the info Carl. I just thought it might be something I had overlooked in the documentation. Your solution is fine, I'm happy to loop like I did in the days before TweenMax.staggerTo()
-
Is there a way to reference the item's index from the vars. For example: TweenMax.staggerFrom($items, 1, { y: -100 * itemIndex }, 0.5); I can calculate the index like this: $items.index(this.target) but it seems like it's something that TweenMax should expose directly.
-
Hi there, excited to see what improvements have been made in 1.11.8. Is this documented in details somewhere?
-
+1 for this
-
+1 for cubic-bezier easing