usheeen
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by usheeen
-
Thanks Zach, I'll give that a try - I mostly wanted to make sure I wasn't missing new functionality as GSAP has expanded quite a bit since I last checked in. Excited to revisit this amazing library.
-
I'm currently investigating migrating from Framer API / Motion to GSAP. Is there a straightforward way to replicate Framer's Scroll component - basically this component automatically provides scrolling and dragging of its contents. It's been a couple of years since I last used GSAP so thought there might have been convenience functionality added for this since. https://codesandbox.io/s/scroll-forked-ieylz
-
Well thanks for considering Carl. I do just think that Flexbox is with us to stay but maybe Greensock should just wait it out until vendor prefixing has been dropped. Until then, this is a fine solution: $(elem).attr('style', 'display: -webkit-flex; display: flex');
-
Hey Diaco, this is indeed a solution but I think this should be supported by TweenMax itself.
-
You're right it is kind of a special case, but a very important one Here are some relevant Stack Overflow solutions: - http://stackoverflow.com/questions/17896846/set-display-property-flex-on-element-cross-browser#answer-17897282 - http://stackoverflow.com/questions/21819801/setting-flexbox-display-with-jquery-for-multiple-browsers/#answer-24706195
-
Check out this pen: http://codepen.io/oisinlavery/full/LVypKX/ Safari is the only modern browser that requires prefixing: http://caniuse.com/#search=flexbox Of course we can't do multiple prefixes so best case scenario is to include -webkit- and have it work in Chrome and Safari. However this will prevent it from working in the non webkit browsers, it also feels weird adding a vendor prefix to TweenMax config, I expect it to do the hard work
-
Flexbox is the modern way to lay out an interface, however it still needs vendor prefixes. At the moment I'm using: TweenMax.set(element, { display: "-webkit-flex" }); ... which supports Chrome, Safari and iOS, it would be great to have this work for all browsers by display: "flex". Why don't I just do this in CSS you ask - I have a couple of plugins heavily utilizing Greensock (think carousels, tabs, etc.) that I need to be JS only, so defining the essential structural styles in code is necessary. For me flexbox is the best and cleanest way to layout a carousel or sliding tab content (using Draggable). I imagine the infrastructure is there to accommodate this essential CSS property. It would be a great addition to your CSSPlugin.
-
I assumed all. Would it be a big deal to add throwUpdate and throwComplete?
-
Ooops, how did I miss this! Marking solved.
-
When I thought about it I thought this warranted a separate post / feature request, mostly because Draggable depends on the DOM and a Greensock event bus is a broader and larger feature request. http://greensock.com/forums/topic/11717-feature-request-allow-draggable-to-emit-events/
-
I've pivoted on this discussion and made a feature request for Draggable events: http://greensock.com/forums/topic/11717-feature-request-allow-draggable-to-emit-events/
-
This came up in my thread from earlier today and ties into another recent thread about events in TweenMax. I'd like to make a feature request for Draggable to emit events (onPress, onDrag, onThrow, etc.). This feature will allow the decoupling of our code from the create function and encourage good coding practice and organisation. Unlike TweenMax, Draggable is heavily tied to the DOM and so I think this is a reasonable request. At the moment I'm doing this using pub/sub to emit the events from within the Draggable init code. It works but it is an extra step. Here is a good example - the PageModule and the HeaderModule are logically separate pieces of code. The PageModule doesn't know about the HeaderModule, it just emits events. Jack, Carl, what do you think?
-
Thanks Diaco, evaluating onDrag rather than onDragEnd does the trick. now I can decouple my modules nicely. Original pen updated: http://codepen.io/oisinlavery/pen/LVGOpZ Blake, I feel like Draggable is so tied to the DOM that emitting events should be added. Do you think I should start a new thread or add to the TweenMax events thread?
-
Thanks for your help so far, updated with your suggestion: http://codepen.io/oisinlavery/pen/vOLWJe Unfortunately, this doesn't seem to fix it, again the snapping doesn't become active until the next drag. My main goal here is to decouple my main Page Draggable from whatever sub modules it might effect. In a way referencing the HeaderModule in the PageModule goes against this. Also, it would be great if Draggable emitted events rather than having to hook up pub/sub myself. Has this ever been considered?
-
Here is the CodePen as promised: http://codepen.io/oisinlavery/pen/LVGOpZ I'm using PubSubJS to handle events between modules.
-
So I think I need to flesh out my example a bit more... My dragEnd function is actually being called in a separate module. I'm sending an event from Draggable.onDrag and listening for it in this module. So perhaps the latency here is causing the problem, maybe the event is arriving a little too late for me to update the snapping in time. I will put together a codepen shortly.
-
Is it possible to set snapping onDragEnd? I've tried... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = function(){ return 0; } } } and... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = [0]; } } but neither seems to work. I'm guessing this is because the snapping tween is created before this point, any ideas? Note: this is a simplified example, my actual application has has much more logic for evaluating where it should snap. Hence cannot define it when creating the Draggable.
-
OSUblake, any other gems? That actually seems like a sensible policy, due to the flexibility the docs can be overwhelming.
-
Guys add this to your docs!
-
When I throw a Draggable element, it can go outside the defined bounds regardless of edgeResistance. It would be great if ThrowProps respected edgeResistance or better still had it's own setting, eg. throwEdgeResistance or edgeResistanceOnThrow Alternatively, allow us to set a maximum value for the number of pixels which the Draggable can exceed bounds on throw. I've also noticed a slight bug / quirk related to this. If the element hits the bounds while dragging, it will obviously stop, but if there is sufficient velocity on release it will briefly jump outside the bounds. (Sorry for the low frame rate, Quicktime screen recording isn't the best...)
-
Kind of amazing that Jack and Carl were able to add this functionality as a drop in, non breaking update.
-
Gotcha, one of those things that you don't know you need until you need it. I'm really looking forward to seeing this go live.
-
Ok here's a fork with updated Draggable.js and it works a really well! http://codepen.io/oisinlavery/pen/qEMwWE I've obviously only tested if the default behavior works, I haven't tested out disabling the behavior. Also, earlier you mentioned "allowEventDefault" property, is this still necessary?
-
Sounds good. http://codepen.io/oisinlavery/pen/bNxZrq I've made another practical example which is slightly different. A drawer which can be dragged open from the side of the screen (recreating Material Design drawer component), the difference is that this time the scrollable area is inside the Draggable element. At a glance it seems to work just as well as the previous example. It might come in useful when testing.
-
Pun appreciated! That sounds reasonable. I've noticed the jerkiness you describe in Chrome emulator. Browsers will improve in time though so good to account for this use case. re: lockAxis function Isn't this in effect an event? onLockAxis: function(){ ... } Is there a reason you want to share the same lockAxis attribute? I guess Snap is kind of similar to this, it accepts a function which is evaluated onDragEnd. I don't have a big opinion on this, just interested in your thought process. +1 to others chiming in, I am greedily asking for everything I need but there's a big community of Draggable users with many unique use cases.
