GreenSock last won the day on August 5

GreenSock had the most liked content!

GreenSock

Administrators
  • Content count

    12,127
  • Joined

  • Last visited

  • Days Won

    350

Everything posted by GreenSock

  1. GreenSock

    React Native Support

    @graphical-iain welcome to the forums! I followed some of the links and I'm a bit confused about what exactly is different about the fork of GSAP that works with React Native. Can you shed any light on that? What would we need to do to make it compatible?
  2. GreenSock

    drawSVG not recalculating path length during tween

    I see what you mean regarding performance, but I think it'd be super awkward to deliver what you're asking for with the "only on window resize" thing. The reality is that resizes can happen at other times too (not just window resizes) and I don't see a clean way to listen for (or give a hook to call) all kinds of resizes. GSAP is build with GC in mind, so we can't set up an internal cache that holds references to all DrawSVGPlugin instances (that'd prevent proper GC). And there's not a way to grab the instance from a tween either. So unless I'm missing something, it's just not realistic to offer this kind of functionality. If you're really concerned about performance and only running the length recalculations at specific times (like window resize), perhaps you could leverage invalidate(), like: var tween = TweenMax.to(".path", 2, {drawSVG:"0%"}); function onResize() { var p = tween.progress(); //forces the tween back to the start, then invalidates it so that it'll re-run its calculations when jump to the recorded progress, making it appear seamless. tween.time(0).invalidate().progress(p); } Of course you could keep your tweens in an array and loop through them, or use TweenMax.getTweensOf() or TweenMax.getAllTweens(). Does that help?
  3. GreenSock

    drawSVG not recalculating path length during tween

    Interesting. Yeah, that's a pretty uncommon need, but I took a crack at accommodating it with an updated DrawSVGPlugin, so you could just add "live" to your drawSVG value and it'll keep the length updated (live). Like drawSVG:"0% 100% live". If you've got other ideas for a better API, let me know. Here's a fork of your original: I have NOT updated the official version of the plugin yet - just the codepen-only one. Let me know if it looks good to you.
  4. GreenSock

    Draw svg Issue with firefox

    I think I figured out a way around that odd Firefox behavior, and I posted it to the codepen-only file for now: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js Better?
  5. GreenSock

    Style not applied on onUpdate, why?

    No problem - it happens to all of us. I've had plenty of those occasions myself
  6. GreenSock

    Style not applied on onUpdate, why?

    GSAP seems to be doing exactly what you asked, but I believe you're missing a "px" (unit) in your circle value. //BAD: value: `circle(${window.innerWidth * 1.25} at 50% 50%)` //GOOD: value: `circle(${window.innerWidth * 1.25}px at 50% 50%)` Does that help?
  7. GreenSock

    stroke-linecap and drawSVG issue in IE11 and Edge

    Just so you know, Google updated to GSAP 2.0.1 and the URLs are listed at: The URLs are much more friendly now
  8. GreenSock

    Google Ad Manager

    Sorry, Chris, but I'm not familiar with Google Ad Manager at all, but perhaps someone else here can chime in with some knowledge. Happy tweening!
  9. GreenSock

    Is TimelineMax is included in TweenMax build?

    This might also be useful for bookmarking because it provides an overview of which tools are inside TweenMax, what the CDN links are, which of the tools are members-only, etc.: https://codepen.io/GreenSock/full/djXzyR/ Happy tweening!
  10. Hm, it sounds like you might be running code outside the browser - is this server-side rendering or something? That error says it's looking for "navigator" (and failing), but that'd be present in the browser. Your imports look a bit odd to me - I'm curious what'd happen if you did it like: import Draggable from "gsap/Draggable"; Or if you really need the UMD version, that's fine: import Draggable from "gsap/umd/Draggable"; If you're still having trouble, please provide a reduced test case so we can see what's going on.
  11. GreenSock

    Repeat a SVG animation

    Hm, it looks like you're not using GSAP at all for those animations - you're just using CSS, right? These forums are for GSAP-related questions. Did you have one of those? We'd be happy to help. Repeating an animation (or a group of animations) is really easy with GSAP - you just set the "repeat" special property of a TimelineMax or TweenMax.
  12. GreenSock

    Is it me or... Firefox?

    Sorry to hear about the issue, @Daniel Eytan Schneider. It's very difficult to troubleshoot a live site with minified code - is there any way you could provide a reduced test case in codepen or something? At the very least, using the unminified version of TweenMax would help. We're not aware of any GSAP bugs related to Firefox, but I'm very curious to see what's going on here. I'm traveling at the moment and don't have time to pull everything apart on your site, but a reduced test case would be amazingly helpful. Oh, and it's usually best to start your own thread instead of jumping into an old one.
  13. GreenSock

    Fresh load behaves differently from cached load

    I don't have time to dig into this at the moment, and it's very awkward to try to troubleshoot a live site like this with many other scripts involved, but it's very unlikely that it's a GSAP thing. It sounds like it's more likely an issue with your code depending on assets being fully loaded but they're not. Like, for example, if you try to get an offset or a width/height or some other measurement BEFORE all the images finished loading completely, the reflow didn't happen yet and the measurements will be off. So make sure you don't fire off your JS code until everything is fully loaded. If you still need help, it'd be awesome if you could provide a reduced test case, like in codepen. We'd love to help - it's just tough on a live site. Happy tweening!
  14. GreenSock

    GSAP Updates have perhaps broken my animation

    The only thing I can think of (which would validate what @PointC theorized) is that perhaps you're animating SVG elements and you've got transform-related data defined in both CSS and the SVG's "transform" attribute. In that case, the browser has conflicting data about transforms and it just has to pick one. So, for example, if you've got transform: translate(0, 10px)" in CSS, and then GSAP sets the SVG's transform attribute to transform="matrix(1,0,0,1,100,200)", what should happen? GSAP may be setting the values properly, but the browser may be overriding it with the CSS data (which isn't changing). Updating to the latest version will likely fix that anyway, because at some point we added a workaround for that. If you still need help, please post a reduced test case with details and we'd be happy to take a peek. Happy tweening!
  15. GreenSock

    How to load DrawSVG via CDN?

    This may be an even better link to keep on hand: https://codepen.io/GreenSock/full/djXzyR/ Just click the "CDN" button next to any of the classes and you'll get the link copied to your clipboard. And the club-only plugins are clearly laid out there as well, and some common questions are answered at the bottom.
  16. GreenSock

    Importing drawSVG fails

    Hm, I'm a bit confused then - I know the modules work fine in React and I don't understand why your build would choke simply on the word "import" if it's set up properly to transpile ES6. Tough to say without having a reduced test case. We did include some instructions about how to handle the members-only plugins in that NPMUsage page under the heading "What about bonus plugins like MorphSVGPlugin?". And yeah, I totally get why you wouldn't want to drop them into node_modules - I only meant that as a last resort if you're having trouble configuring your build process. And for the record, I've heard of a problem being (in some cases) that the transpiling is set up to only handle stuff in node_modules or something, so if you're pulling the bonus stuff in a different way, perhaps it's AFTER the transpiling happens? Just a guess (probably wrong).
  17. GreenSock

    Just a question about set vs element.style

    Yep, @Jonathan and @Carl are correct. Just to be add to what Jonathan said, it's particularly helpful to set transform-related values via GSAP rather than directly or via CSS because future animations can be faster and more accurate. GSAP caches the transform-related values and can skip parsing the matrix() or matrix3d() values that are reported by the browser which are inherently ambiguous (a rotation of 0, 360, 720, etc. result in the same matrix, and various other values combinations could be equally valid so things can get very imprecise). If all you're doing is setting values that are not transform-related, it's fine to set them directly. Most people find it's "safest" to go through GSAP since it solves so many browser inconsistencies, especially with transforms.
  18. GreenSock

    GSAP Updates have perhaps broken my animation

    Yeah, a reduced test case would REALLY help. Like, what EXACTLY is breaking and how can we reproduce the problem? It's very difficult to troubleshoot a live site with lots of code. And is it breaking in all browsers?
  19. GreenSock

    Quick setup question!

    Couldn't agree more. So proud to be a part of this community. It's got some of the most generous, kind, smart people I know of anywhere on the web. 🙌
  20. GreenSock

    Importing drawSVG fails

    Oh, and one other option is to drop the bonus files directly into the node_modules/gsap folder.
  21. GreenSock

    Importing drawSVG fails

    Hmm, it sounds like your bundler may not be configured to understand (or transpile) ES6 modules(?) According to that error message, it's choking on "import" which is pretty standard ES6 stuff. If your setup doesn't understand ES6 modules, you could just use the plain ES5 files which are also included in your member zip download (in "uncompressed" or "minified" folders). As for documentation, @conor909, please see https://greensock.com/docs/NPMUsage. Is that what you're looking for? @eelsiee, if you're still having trouble, would you mind creating a reduced test case and giving us access to it? Like a basic github repo or stackblitz link or something like that? Then we could try doing the compile on our end and see exactly what you're seeing. And thanks @eelsiee and @conor909 for being Club GreenSock members!
  22. GreenSock

    An instant flare at the bottom, a black strip on top!

    That's because the image hasn't finished loading when that JavaScript runs, so it literally has no height at all, thus transformOrigin:"50% 50%" ends up basically at the very top edge (because again, there's no height, thus 50% of 0 is 0). Either use px like transformOrigin:'550px 157px' or set up an event listener to delay the execution of the code until the image has finished loading. Does that clear things up?
  23. GreenSock

    Set transition delay with GSAP like CSS does

    I'm not quite sure what you mean. You can have as many tweens as you want. Here's another technique with a few tweens: Does that help?
  24. GreenSock

    non-scaling-stroke and DrawSVG

    Interesting - that's actually due to the fact that it was rotated when the measurements were taken (non-scaling-strokes have a bunch of weird browser issues). Thanks for pointing that out. I believe I've got a fix in place for the trial version of DrawSVGPlugin - just clear your cache and you should see what I mean. Better? Once I get confirmation, I can drop it into the official downloads for all Club GreenSock members. Looks like you haven't signed up yet - maybe this will make it worthwhile
  25. GreenSock

    DrawSVG and non-scaling-stroke

    Ah, very interesting - that's because the browser actually changes the length of the path when you resize with non-scaling-stroke. That definitely complicates things, but I think I've got a solution in place now. Please check out the updated codepen "trial" version (just clear your cache and you should see it work in your demo). Better? Notice that if you tried doing that animation with CSS or some other JS library, it'd have that same problem. But now GSAP works around yet another browser quirk Thanks for pointing this out, Craig.