Jump to content

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

GreenSock last won the day on August 21

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. Thanks for the suggestions, @RolandSoos. I do plan to make some similar changes in the next release. 👍
  2. Maybe at some point, but as you probably know @OSUblake we've got a LOT going on at the moment so this isn't really something we can dig into right now. I can put it on the list of possible additions down the road though. 👍
  3. I'm a little confused - do you have what you need now or were you still looking for some help? I thought you were gonna post something of your own that you were trying to add anchors to, but it looks like you just copied one of our codepens that already had anchors showing. If you need some help with something of your own, just let us know and we'd be glad to take a peek. Otherwise if you're all set, even better!
  4. @knalle sure, if you provide a reduced test case in codepen or something, I don't mind taking a peek. There may be a tool in MorphSVGPlugin that'd make it a bit easier.
  5. Glad to hear you're enjoying the tools! What you're asking for isn't exactly a super simple case, but here's one approach: https://codepen.io/GreenSock/pen/vYByKZN?editors=1010 Is that what you're looking for? Hopefully it's easy to dissect. Happy tweening/dragging!
  6. Yep, I see the same thing. Ha. Yeah, that certainly seems like an incorrect namespace.
  7. Yeah, I totally get that. Makes sense. Hey, if GSAP 2.0.2 is working well for you and there really aren't any pain points, why risk the upgrade? I did put a fix in for the issue we're discussing here, so it may very well be worth the risk in this case. Let me know if there's anything else we can do. Happy tweening!
  8. It seemed like a browser (or other environment) bug where [only in that particular environment] createElementNS() produced an element whose "style" was completely inaccessible! Weird, right? I can't imagine it's related to GSAP in any way. Is there a reason you don't want to update to the latest GSAP? Just curious.
  9. Well this is pretty ambiguous because technically this is like defining two different color values that you're asking the tween to animate to at the same time - one from the className and one from the "color" you're defining in the tween itself. Like @ZachSaucier said, we really don't recommend className tweens because it requires literally analyzing every single property, finding the ones that are different and animating those. It's much cleaner to just tell GSAP the specific properties/values you want to animate (plus I think that makes your code more readable and direct - less ambiguity).
  10. Have you tried using the Draggable instance's pointerX and pointerY values? That's one of the ways it smooths out cross-browser differences. And to be clear, the docs don't indicate that the event will always have pageX/pageY values - it has no control over that. It simply passes along whatever it gets from the browser.
  11. Yeah, I'd guess that is indeed related.
  12. Is it something Draggable-related? If you need help, feel free to share more details. But yeah, I think that as long as you're trying to straddle between your own native handlers of click/touch/pointer events and using Draggable (which smooths most of that out), I'd guess you'll have your hands full
  13. I didn't have a lot of time to look at this, but there are some inherent challenges with scrolling on iOS. If you look at the scrollbar, you'll see that Draggable is indeed being responsive to your touch but iOS is counteracting it in certain cases (no doubt it's trying to be "helpful"). I'd probably avoid the whole scrollTop thing and just affect transforms instead, kinda like this: https://codepen.io/GreenSock/pen/mdbPaqv?editors=0010 Is that any better for you?
  14. I doubt that is possible. It is a Flash player limitation I believe.
  15. I know it's solved, but just to chime in - if your goal is to add a perspective(999px) to the transform while it's animating, you could try doing an onUpdate: tl.tl(element, 2, {scale:0.7, onUpdate:function() { element.style.transform += " perspective(999px)"; } }); Just a thought. It could be made even easier with a helper function that'd automate some of that. Anyway, happy tweening!
  16. That's very tricky indeed, as you're trying to use a native "click" listener instead of Draggable's built-in onClick functionality, but you're still making the same element draggable and in my opinion that's a bit risky because various browser handle things very differently. For example, some browsers require that you preventDefault() on the initial pointerdown/touchstart/mousedown event in order to avoid touch-scrolling while you drag...but if you preventDefault() at that point, then when you pointerup/touchend/mouseup, it won't recognize it as a "click" even if you don't preventDefault() that final event. Other browsers DO treat that as a click event regardless. I could go on and on about all the differences and bugs in browsers surrounding touch/drag/click behavior. In your demo, it looks like sometimes the browser would dispatch the native "click" event first, but other times it lagged just a tiny bit behind the pointerup/touchend/mouseup event that Draggable taps into. I made a timing adjustment in this version of Draggable which seems to resolve this particular issue: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js but beware that it can't possibly solve other inherent issues related to trying to mix native event handlers with draggable events. Unfortunately, dealing with all the various browser quirks is just a nightmare. Draggable does a really good job of normalizing things that you run through it, but if you're trying to straddle between letting it handle some things and using native events for other things...well, good luck with that I can only really control what Draggable does with its own behavior. Hopefully that tweaked version helps. I'd love to hear how it performs for you.
  17. Any chance you could provide a reduced test case? I'm curious about this. Keep in mind that some browsers cannot report an SVG's bounding box unless it's visible in the DOM.
  18. Oh, I didn't mean that your most recent demo had customizations made to GreenSock tools - I was just trying to be clear about what would make the ideal reduced test case. You've posted some other stuff that did include customizations, so I figured I'd mention it, that's all. That's what triggered my request for the most simplistic, basic reduced test case. Your codepen has a ton of other code that might (or might not) be causing issues. The goal was to isolate things as much as possible so we can get you an answer quickly and identify things accurately. It's just tough to parse through 400+ lines of code and try to understand what exactly your issue is, that's all.
  19. No. I'm not sure why you'd think that. The purpose of the snap function is to run logic every time the pointer moves when dragging, so that it can apply any snapping necessary at that point. I'm not really sure what I'm looking for, but I see 3 different sliders. I assume you're talking about the bottom one maybe? I can drag it just fine all the way up and down. It would be amazing if you could provide a very reduced test case without all the custom code in there - just the most basic thing you can possibly provide that demonstrates the issue. Hopefully less than 20 lines of code total would be ideal. Thanks so much!
  20. I haven't had time to read through your entire post or all the code in your demo, but I wanted to mention a few things and then you can let me know if you still need some help/input: In terms of snapIndex, wouldn't it be as simple as feeding the value into indexOf() to find what you need? There are actually a deltaX and deltaY values attached to the Draggable instance - would that help you determine the direction that you're after? Your getSnap() function seems to assume the type will always be either "x" or "y" (never "x,y" or anything else) which may be totally fine in your use case. I didn't follow what CS.context was (I did a search in the codepen and didn't find anything), nor do I understand what the "mean" was for. Are you trying to make it snap to increments of mean (starting at 0)? If so, that math looks right to me. I was confused by this comment - wouldn't you expect it to run on every move event so that your custom snapping logic can be implemented in whatever way you want? Like...we can't necessarily assume that if it's outside bounds, that your snapping logic won't apply some other rule. Of course that seems like it'd be pretty uncommon, but when we let users define a snap function, we've gotta keep things open, you know? And I doubt that there's gonna be some noticeable performance hit from running that logic between snaps or outside bounds. Perhaps I misunderstood what you meant though.
  21. I think I identified the edge case with edgeResistance intermittently causing problems (only when dragging outside the bounds of course) - it's just a rounding thing related to browsers only having a certain amount of precision when reporting the pointer's position. I posted the revised (uncompressed) Draggable here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better? I'm not sure that's at all related to what you were originally describing, @marya. Please let me know if there's anything else behaving oddly.
  22. Sorry about the confusion there - I've never seen that happen before but your demo helped me find a very rare edge case in the conversion algorithm where the arc command "a" could run into a Math.acos(-1) which JS returns as NaN (weird!), so I implemented a workaround and uploaded a revised MorphSVGPlugin. Seems to work great now! (you may need to clear your cache) Like others have suggested, tweaking your path would also solve the issue. But I want MorphSVGPlugin to be as bulletproof as possible Thanks for being "Business Green"!
  23. I'm a bit confused about the "why" behind all this - if your goal is to synchronize your audio with a particular timeline, wouldn't it be much easier to just use an onUpdate on that timeline and check the time(), compared to your audio's time and if it drifts beyond a certain threshold, make your adjustment to the audio?