Jump to content
Search Community

eliajf

Members
  • Posts

    15
  • Joined

  • Last visited

eliajf's Achievements

  1. Thanks, @OSUBlake. I understand exactly what you are saying and probably phrased it incorrectly. I was trying to figure out how to reset the inline style CSS. I thought killing the Draggable object and then assigning a new one would do that, but apparently not. I got a basic drag working between your code and @Diaco. I would like to refine and improve so will refer back to your codepens later. Thanks again to both of you for the help.
  2. This was the missing call. I found it in another forum post: TweenMax.set($row, {clearProps:"x,y"}); I kill the Draggable process then call .set() with this clearProps, which cleans the old code up. Just happy I got it working! Too much to learn about GSAP, to be honest.
  3. That's much cleaner. Thank you. Did you just write that? Holy cow if so. I wish I was that versed in GSAP. Let me play with that a little. In the meantime, I don't understand why .kill doesn't, you know, kill it. I added four lines -- one commented out which I didn't include here -- at the bottom of onRelease, but this doesn't actually reset the Draggable for that row: var draggable = Draggable.get($dragRow); draggable.kill(); moveRowsDraggable($dragRow); Shouldn't that kill the draggable object for that row and create a new one when I call moveRowsDraggable again? Instead, it retains the "style" contents for the row. I also tried explicitly removing the style, which is the commented out line. That didn't work either.
  4. Here's a sample in Codepen. I'd like to drag the rows around after the user selects Move. I am finding the correct position and re-arranging the DOM correctly, but I can't figure out how to "reset" Draggable. I've tried update. I've also tried killing it and resetting it, which oddly remembers its old settings and recovers. Any suggestions on how to make this work? (Also while I'm here, why do I have to remove the "style" in moveRowsCompleted? I shouldn't have to clean up after GSAP.) I'd really like to get the rows to move out of the way as I drag around and saw this but that's a bit too complicated for my skill level, although it is beautiful to watch. If there is a simpler example I'd appreciate it: http://codepen.io/anon/pen/qdKqWE?editors=101 (I've suggested this before and I haven't seen anything but it would be really nice to have a series of simple functions to do some of these things like jQuery UI. I really want to use GSAP -- it is so much smoother than jQuery and works on mobile browsers -- but stuff like sortable is extremely difficult to achieve, or at least appears to be.) One last comment: I need to use animations a lot on a temporary basis like this. I want to make the animation go then, when it is done, be done with it and the code. GSAP seems to leave a lot of style tags around. Is that correct or am I mis-interpretting its primary usage model? Thanks for any help in advance.
  5. That seems to fix it. Thanks. Do we get notified (emailed) when a new version is released?
  6. eliajf

    Getting started

    The video is awesome! I hope that's on the home page. At least that gives me a sense of what is possible. Now if there was also a page with links to a series of simple CodePens that demonstrated these and a few others, as OSUBlake suggested, that would be a capper and I don't think I'd feel so lost. Thanks for hearing me out everyone.
  7. Okay, I had some time this morning to simplify the demo and post to Codepen: http://codepen.io/eliajf/pen/wByeKN Select any row then select a key (7, 8 or 9). See how the field doesn't expand to accommodate the extra character appended to the end. Now, comment out the two TweenLite calls and uncomment the two lines below that and try again. Notice it works correctly now. Hope that helps you track down the bug.
  8. eliajf

    Getting started

    This would be perfect. In fact, the Tweens that Diaco posted are a fantastic start on some of what I was thinking. Part of the problem as a newbie is just knowing it is possible. Once I know it is possible it is harder to give up on GSAP.
  9. eliajf

    Getting started

    I've been thinking about this and think I know the disconnect, even if I am having a hard time explaining it. It isn't about me being a beginner with GSAP (I am but have also been using it for a few months) really and it isn't about me just being more familiar with jQuery. I've been through much of this documentation previously (although the video is new. I will check that out and had it in my inbox to watch when I get a little time.) Here's the difference, I think: GSAP is animating objects while jQuery is animating the DOM itself. Maybe that makes no sense or is simplistic. I used GSAP to drag a nice little list picker/date picker widget. It was indispensable for that. It has a nice bounce effect when dragged and has really nice acceleration/deceleration properties. I want to do more with it but I was able to get it working quite quickly. Where I've struggled is animating the DOM itself, which is most of what I'm doing. This is showing a hidden section or displaying a keypad in a nice animated way. Mostly this is the kind of work I'm doing as the product is a productivity app. I'm finding this to be much harder than I'd think it should be. So I'm not suggesting a change in API at all, or a simplified API. I'm suggesting pre-built but common animations. Thinking out loud, maybe those are in a library or in a bunch of codepens that are linked into the site in some obvious way. The type of things I'm thinking happen to align closely with the basics created by jQuery: slideUp, slideDown, animate css property, etc. I really don't want to use jQuery for these types of animations. I do want to use GSAP and I want to use GSAP for all animations. The examples I've seen, though, are pretty fancy animations of objects in the DOM. That's not what I need. I hope I've done a half-decent job of explaining. --- Here's my show/hide code for a collapsibleSection, written with jQuery. It finds all the rows marked collapsible congruent to each other starting with element $el, which happens to be a header row (.collapsible-header). It wraps all that in a div, collapses the entire thing and when done, marks those rows as hidden and unwraps itself. For various reasons the code must be unwrapped once collapsed or expanded. Showing reverses the process. I never could get this to work with GSAP, although I suspect if I could keep it wrapped then I could have just reversed the animation. Again, I can't do that though. collapsibleSection: function($el, animated) { var $collapsibleSet = $el.nextUntil(":not(.collapsible)"); if (animated) { $collapsibleSet.wrapAll("<div></div>"); var $cw = $collapsibleSet.parent(); if ($el.hasClass("is-collapsed")) { $cw.hide(); $collapsibleSet.removeClass("is-hidden"); $el.removeClass("is-collapsed"); $cw.slideDown(constant.ANIMATION_STANDARD_TIMER_MS, function() { cleanse.unwrap($cw, false); TweenLite.to(window, constant.ANIMATION_STANDARD_TIMER, {scrollTo:{y:$el.position().top}, ease:Power2.easeOut}); }); } else { $el.addClass("is-collapsed"); $cw.slideUp(constant.ANIMATION_STANDARD_TIMER_MS, function() { $collapsibleSet.addClass("is-hidden"); cleanse.unwrap($cw, false); }); } } else { if ($el.hasClass("is-collapsed")) { $collapsibleSet.removeClass("is-hidden"); $el.removeClass("is-collapsed"); } else { $collapsibleSet.addClass("is-hidden"); $el.addClass("is-collapsed"); } } },
  10. eliajf

    Getting started

    I'm using and paying for Greensock because I need the Draggable plug-in. It is worth the money. But I'd like to get more value from the overall package so figured I'd use GSAP everywhere. Can I be honest with all of you? Personally, I find GSAP to be a pain in the ass to use. It is amazingly powerful, which is the root of the problem. I've spend the past couple of days trying to get it to do a simple animation that took five minutes with jQuery animation methods. Given that my goal is not to just complain but contribute back... Can I make a suggestion? Put together a library or two of common, simple animations that I can use off the shelf without having to be an expert. I'd start with the basic jQuery and jQuery UI animations, making GSAP equivalents. Ideally, this would also allow me to look at your code to see how you did routine things, bringing me along so I can do more advanced stuff later. At this point I'm just frustrated and, sadly, using jQuery animations in my project because they actually worked. I really want to get more value from GSAP and hope my comments here aren't taken the wrong way.
  11. I looked through that list 10 times and didn't see inline-block. Of course, you saw it in two seconds. I'll see if I can put something together for a demo when I get my head above water. At the moment I'm using the older CSSPlugin so I can ship, since everything worked fine with it (and still does).
  12. I upgraded today from v1.14.2 to 1.15.1 and find that the CSSPlugin.js breaks my code. It seems to change my css properties to be a fixed width at the point of animation so changes to that property after the animation has completed no longer obey my css. This is my tween and, as you can see, nothing fancy except animating a class and then showing an element within that section once animated: TweenLite.to(edit.field, constant.ANIMATION_SHORT_TIMER, { className:"+=is-focused", onComplete: function() { if ($clear) TweenLite.to($clear, constant.ANIMATION_SHORT_TIMER, {opacity: "1.0"}); } }); Here is the css with v1.14.2 for edit.field after the animation: border-bottom-color: rgb(235, 171, 8); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(235, 171, 8); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(235, 171, 8); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(235, 171, 8); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(0, 0, 0); cursor: pointer; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-weight: 300; height: 55.59375px; line-height: 44px; max-width: 100%; padding-bottom: 4.800000190734863px; padding-left: 6.400000095367432px; padding-right: 6.400000095367432px; padding-top: 4.800000190734863px; position: relative; white-space: pre-line; width: 116.765625px; word-wrap: break-word; With 1.15: border-bottom-color: rgb(235, 171, 8); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(235, 171, 8); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(235, 171, 8); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(235, 171, 8); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(0, 0, 0); cursor: pointer; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-weight: 300; height: 55.59375px; line-height: 44px; max-width: 100%; padding-bottom: 4.800000190734863px; padding-left: 6.400000095367432px; padding-right: 6.400000095367432px; padding-top: 4.800000190734863px; position: relative; white-space: pre-line; width: 90.078125px; word-wrap: break-word; Notice how CSSPlugin added a display:inline-block; line (bold and italicized above) to the CSS that wasn't there with version 1.14. I hope this helps.
  13. eliajf

    Click test distance

    One other note: I'd highly recommend adding something about minimumMovement here: http://greensock.com/docs/#/HTML5/Drag/Draggable/ Especially correcting the bullet point that discusses 3px movement so it also discusses this override.
  14. eliajf

    Click test distance

    Thank you all. I apologize about disappearing as I thought no one responded since I didn't get any notification of a response. I downloaded 1.15/0.11. This will make a huge difference for mobile devices which seem to be more sensitive than desktop ones.
  15. Is there a way to change the click test from 3px to something greater? I'm finding in Android browsers that a Draggable object is hard to click because it has a tendency to move a very short distance when I tap the field. On most mobile browsers, 3px is extemely tiny because of retina displays, thus a larger pixel range would be beneficial.
×
×
  • Create New...