GreenSock last won the day on October 6

GreenSock had the most liked content!

GreenSock

Administrators
  • Content count

    11,343
  • Joined

  • Last visited

  • Days Won

    317

GreenSock last won the day on October 6

GreenSock had the most liked content!

Community Reputation

4,736 Superhero

6 Followers

About GreenSock

  • Rank
    Administrator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

43,363 profile views
  1. Draggable control animation until released

    How about something like this?: I just create a repeating tween for the spin, and adjust its timeScale() according to the position of the Draggable. Is that the effect you're after?
  2. PHP not playing nice with Draggable

    Sorry, Draggable (like many browsers) doesn't support "zoom". I'd strongly recommend following Jonathan's advice and avoiding that altogether in favor of transforms (scale).
  3. PHP not playing nice with Draggable

    Welcome to the forums, @Nineve. I didn't have time to analyze everything, but I wanted to offer a few comments: It looks like you're changing the x/y values of the target directly inside your Draggable's onDrag which strikes me as a bit dangerous because it's like you're fighting with Draggable itself to control the same properties. I'm curious what your goal is there. I don't think the "zoom" property is widely supported, though I could be wrong. Just to be clear, GSAP can't affect PHP because it is only JavaScript which runs client-side in the browser. You don't need to put PHP in codepen - maybe you can just take whatever HTML gets shipped to the browser by your php page and put THAT in codepen. See what I mean?
  4. strange behavior in Safari (only) - drawSVG

    Interesting. Thanks for letting us know. Please share any insights you gain about how to work around the issue in those two browsers (other than the x1, x2 attribute thing you mentioned).
  5. Queueing .ticker callbacks before visual updates?

    Yep, it happens immediately. Otherwise, it'd be pretty awkward if you had code right after the progress() call that depended on the values being set. See what I mean?
  6. Positive and negative points of Greensock

    This is actually a great question and I'm grateful for all the responses thus far. I'll try to be as unfiltered as possible, taking off my green sock for a moment File size - GSAP does a LOT for you, solving browser inconsistencies, delivering a ton of features, blah, blah - that takes some kb. Sure, there's a CDN and GSAP's ubiquity makes the file size a non-issue in many cases, but the reality is that TweenMax is larger than most other animation libraries and if you're bundling it in your own JS file (like a Webpack bundle), it can be a tad heavy if you're only using it for a few little things. License/cost - even though the vast majority of use cases qualify under the standard "no charge" license, some might require the special commercial license that comes with "Business Green" Club GreenSock memberships. It's not "open source" in every sense (yes, you can view the source on Github but that's not the same thing). And some of the plugins are only available to club members. I argue that the license is actually a BENEFIT, not a drawback, but some people may feel differently and that's okay. Main thread - this isn't specific to GSAP, of course, but some would argue that CSS animations and WAAPI can get better performance than any JS library when it comes to animating transforms (scale, rotation, translateX/Y) because in some cases (when NOTHING else is animating except transforms or opacity, and the main thread is super busy, and there aren't too many transform tasks), transforms can be spun off to a different CPU thread. Sometimes that's indeed useful and can result in less jank. That being said, I've seen several cases when GSAP is actually faster than WAAPI and CSS, so it's not fair to make a blanket statement that JS libraries are always slower. https://greensock.com/js/speed.html I think that about sums up the "negatives" that I've heard in the past. Of course I want to chime in with a ton of counter-arguments that dwarf the negatives, but that's not what you asked for As for Snap.svg, that's more of a library for creating and interacting with SVG elements, not so much animating them. Even the author of Snap.svg said that GSAP is probably the best thing for animating Snap.svg objects. So I wouldn't say that Snap.svg and GSAP are competitors at all - they're complimentary. GSAP is focused on animation - you can't create SVGs with it. Likewise, the author of Snap.svg said it wasn't designed to do complex animations. Does that help?
  7. Queueing .ticker callbacks before visual updates?

    Hm. Well, if you set the progress(), that happens immediately.
  8. Queueing .ticker callbacks before visual updates?

    Hm, I don't quite understand the question. Got a quick demo? What "update" method?
  9. Queueing .ticker callbacks before visual updates?

    Yep, if you set the priority to 1 (or above), it should call that function BEFORE the engine updates all the tween values because the internal ticker has a priority of 0. Enjoy!
  10. Does GSAP's jQuery plugin replace .fadeIn etc?

    The plugin hijacks most animate() calls but there are a few function calls that it doesn't intercept like show(), hide(), and toggle() because of some legacy issues with jQuery and some special ways it likes to handle things. I'd say that the jQuery plugin is a great drop-in to get good bang for your buck (very little time/effort), but I'd strongly recommend shifting to GSAP's regular API when you can. I think you'll find it much more flexible.
  11. Inconsistency between Draggable, ScrollTo & Timeline

    Hm, I read your question a few times and I'm still not quite sure what the question is. Would you mind elaborating a bit? Are you asking about the best way to rebuild that codepen so that it doesn't use a timeline and ScrollToPlugin? Was there a particular functionality you want but can't achieve?
  12. Using scope -solved

    @determin1st I'm confused. Do you have an example of it not working properly? Like maybe a super simple codepen? I'm not seeing any odd behavior but maybe I'm missing something.
  13. PIXI plugin tip

    Sure, I think we can accommodate that for ColorMatrixFilters. I updated it here - does this work well for you?: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js
  14. Animation direction (from right to left)

    Hm, it doesn't look like that code would draw anything, but maybe you just wanted to reverse the order in which the circles animate their scale? If so, try setting the stagger value to -0.1 instead of 0.1. Does that help?
  15. timeline problem with splittext

    It looks like the main problem is that you're using a single TimelineLite for all of your animations even though they're non-linear and the timing is dynamic. There are many ways to fix this, but probably the easiest one is to just declare a new "tl" variable in your open and close handlers: That way, their timing starts fresh each time. Previously, since you were dumping everything into a single timeline, the playhead would reach the end and then later when you added more tweens to the same timeline, its playhead would jump ahead because its startTime was so far in the past (and time had elapsed). It's not a bug - that's how it's supposed to work. But in your case, it looks like you wanted things to behave differently (fresh timing each time). Does that help?