GreenSock last won the day on January 4

GreenSock had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on January 4

GreenSock had the most liked content!

Community Reputation

5,017 Superhero


About GreenSock

  • Rank

Contact Methods

Profile Information

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

Recent Profile Visitors

44,024 profile views
  1. Dynamic Length Timeline

    Yeah, sorry about that - I put that 1000-second limit on GSDevTools to avoid situations where crazy long (like infinite) timelines couldn't really be controlled intuitively (imagine dragging 5 pixels and that making the timeline shoot ahead by thousands of seconds). I didn't really think folks would intentionally go beyond 1000. You should be able to simply set a "maxDuration" vars property to override that if you'd like, like GSDevTools.create({..., maxDuration:5000}); Does that help?
  2. startDrag bug in chrome touch events

    Hm, I tried reproducing this in Chrome and Safari but had no luck. You're saying that if I press/drag "Trigger" multiple times, it only works properly the first time but on all subsequent drags, it jumps back to the start and then stutters? Can anyone else reproduce this? @Sahil what version of the browsers are you testing it on?
  3. Apply bezier to scrollTo()

    Hm, I'm a little fuzzy on what behavior you're looking for. Would you mind offering some more specifics? Do you want it to go down to one anchor, smoothly go back to another spot, then another, etc.?
  4. Like @Dipscom, I can't seem to reproduce the problem at all either. Any idea how to make it happen? Might you have an extension installed that might be doing something weird?
  5. DrawSVGPlugin with Ionic3

    Hm, seems to work fine: Have you tried this import instead?: import DrawSVGPlugin from "gsap/DrawSVGPlugin"; If that doesn't work, I'm not quite sure what might be the problem in your setup. Are you getting any errors in the console?
  6. Path comparison with MorphSVGPlugin?

    Hm, I can't think of an easy way, no. Technically there's a pathFilter() method that'd spit back the two shapes with matching numbers of anchors in a cubic bezier-based string which I suppose you could loop through and try to compare stuff, but I don't see a simple way to deliver what you're asking for. Maybe figuring out the total distance that each corresponding point must travel between the two shapes, but even that isn't a perfect way to do this (in my opinion). You'd have to figure out the center point for each shape and offset all the measurements accordingly (otherwise, if one shape is in the upper left corner and the other is in the lower right, the distances are artificially far because I assume you just want to know the overall shape differences, not the absolute distance that each anchor travels). I wish I had an easy answer for ya. Maybe someone else has an idea.
  7. rotationY ios 10 safari 3d bug

    Yeah, that actually has nothing to do with GSAP. It's just how Safari renders things in 3D. Unlike other browsers, it attempts to render the intersecting planes in 3D, and it ignores z-index (in that regard). In your example, one thing you could do is just push the header way forward in 3D space using transform: translateZ(100px).
  8. Stagger groups of paths

    Sure, you could just wrap that in a function and reuse it like this: That way, it's much easier to tweak that animation in just one spot. There are a bunch of ways you could do this actually. Does this help?
  9. One of GSAP's specialties is dealing with transforms. It solves all kinds of problems (browser differences, bugs, SVG quirks, as well as always delivering a consistent order-of-operation). There's actually a lot of work involved in parsing an elements initial transform state (the browser reports it as a matrix() or matrix3d() string, so GSAP must pull apart all the components like x, y, scaleX, scaleY, rotation, skew, etc. from that). It caches those values in order to maximize performance. Typically when someone is using GSAP, they just let it handle all the transform stuff, so this strategy works great. However, it sounds like you're trying to use GSAP for editing/animating the transforms and then you're manually altering them directly (outside of GSAP), thus when GSAP uses its cached values it isn't delivering the results you wanted. Don't worry, there's an easy fix - you can force GSAP not to use its cached values by adding parseTransform:true to your next tween. However, I strongly recommend just using GSAP to do ALL of your transform-related stuff because it'll maximize performance, minimize bugs that you run into, and save you some headaches. So instead of directly setting transforms like element.transform = "matrix(1,0,0,1,0,0)", I'd do TweenMax.set(element, {x:0, y:0, scale:1, rotation:0}). Does that help?
  10. Block Reveal Effect with GreenSock

    Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for?
  11. SVG Rotation bug(?) - Apple specific

    Excellent! Thanks so much. Glad this resolved things. Happy tweening!
  12. GSDevTools blinks end of timeline on start

    Oh, one problem I see right away is that you're loading a very old version of GSAP. GSDevTools requires 1.20.3 or later. Please update and then if you're still having trouble, let us know.
  13. SVG Rotation bug(?) - Apple specific

    I believe the problem is actually caused by the fact that for <circle> elements, Apple makes the origin of the stroke at a completely different spot than all the other browsers. It has nothing to do with rotation or a bug in GSAP. It's just an annoying choice Apple made. You can resolve it by converting the <circle> to a <path> so that the coordinates are explicit about where to start. MorphSVGPlugin has a super convenient method for doing this, so all you'd need to do is add this line to the top of your JS: MorphSVGPlugin.convertToPath("#progress"); But I noticed you're not a Club GreenSock member, so you don't have access to MorphSVGPlugin. I ran the conversion for you and got this, which you can just swap in for your <circle> instead (thus you wouldn't need MorphSVGPlugin): <path class="st2" id="progress" d="M589,319 C589,468.1,468.1,589,319,589,169.9,589,49,468.1,49,319,49,169.9,169.9,49,319,49,468.1,49,589,169.9,589,319z"></path> Does that help?
  14. GSDevTools blinks end of timeline on start

    Hm, would you mind providing a reduced test case (perhaps in codepen or jsfiddle) that demonstrates the issue? It's just tough to troubleshoot blind. Happy to help, I just need a little context.
  15. Resizing Browser Causing Animation to Malfunction

    I think I see what the problem is - GSAP doesn't natively interpolate "vw" or "vh" units (though it likely will when 2.0.0 is released, but that won't be for a few months most likely). It can set() them directly, but interpolating is different. In this case, the inbetween values are converted to px. So here's a solution that gives you the same result but just does the conversion for you at the right time: Is that what you're after?