Jump to content
Search Community

usheeen

Members
  • Posts

    47
  • Joined

  • Last visited

Recent Profile Visitors

5,001 profile views

usheeen's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

6

Reputation

  1. usheeen

    Drag to scroll

    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.
  2. usheeen

    Drag to scroll

    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
  3. 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');
  4. Hey Diaco, this is indeed a solution but I think this should be supported by TweenMax itself.
  5. 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
  6. 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
  7. 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.
  8. I assumed all. Would it be a big deal to add throwUpdate and throwComplete?
  9. Ooops, how did I miss this! Marking solved.
  10. 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/
  11. 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/
  12. 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?
  13. 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?
  14. 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?
  15. Here is the CodePen as promised: http://codepen.io/oisinlavery/pen/LVGOpZ I'm using PubSubJS to handle events between modules.
×
×
  • Create New...