Jump to content

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

GreenSock last won the day on January 15

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. GreenSock

    Laggy animations

    @PaulB yes, I definitely want to see a reduced test case if at all possible because GSAP 3 should not be noticeably slower than GSAP 2 and I'm very curious to see your use case. Do you have a reduced test case that shows v2 and the same thing with v3 that we can compare? I wonder if the perceived difference actually has nothing to do with GSAP but only a change in the way certain browsers render things. I remember a while back Chrome suddenly changed how it rendered 3D transforms (at least on the Mac) and it made a HUGE performance difference but nothing changed in GSAP.
  2. I think Zach already answered that above - you must have a license for anyone who writes or edits any GSAP-related code in your theme/app/site. Yes, if the developer that has the license creates something for another company that sells it but NOBODY (besides the license-holder) makes any edits or codes anything that's GSAP-related, that's fine. It's not a license that can be passed around though. I think you'll find that the license pays for itself quickly, even if you need to get a multi-developer license. Happy tweening!
  3. GreenSock

    The locomotive

    Sorry about that, @mikel - there was a regression in 3.0.5 that caused tweening of timeScale() on another animation not to always work as expected. That should be resolved in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js - is that better?
  4. Yeah, that's because the official GSAP property is "rotation", but when you directly animate things via CSSPlugin it'll accept some aliases too like "rotate" (which internally we just map to "rotation"). MotionPathPlugin wasn't able to do that mapping. I'll update the next version of MotionPathPlugin to look for those aliases too - here's a preview: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js Better? By the way, thanks so much for the reduced test case! Super helpful.
  5. @ZachSaucier that's because there was literally no color applied at all, so it's treated as transparent. Here's a simplified version that seems to work for me (unless I'm misunderstanding the goal): https://codepen.io/GreenSock/pen/mdyzBXN?editors=0010 There are actually a ton of other ways to do this, @shanemielke. Does the above example work well for you or would you like some other options? You probably don't need an onUpdate, though that's perfectly acceptable if you prefer to go that way.
  6. GreenSock

    Access svg outside.

    I'm a little lost about what exactly you're asking here or what you need help with. And it's super difficult for us to troubleshoot blind - if you still need some help, can you please provide a reduced test case that shows the issue? Otherwise we're just grasping at straws. You definitely shouldn't be mixing GSAP animations with CSS transitions. Remember, CSS transitions kick in ANYTIME a property is changed and since GSAP literally changes the values about 60 times per second, the CSS transition would basically interrupt every time and say "WAIT! Don't make that change quite yet...I'm gonna slowly do that.", thus you get conflicts. See what I mean? I can't imagine a scenario where it'd be helpful to mix CSS transitions and GSAP animations, so maybe you can describe why you did that (what your goal was) and we can help you go in a better direction.
  7. Without seeing a reduced test case, my best guess is that you just forgot to register Draggable. gsap.registerPlugin(Draggable); (Obviously do that before you actually use Draggable) Does that help?
  8. Sure, you could simplify that quite a bit. Here's a fork with GSAP 3: https://codepen.io/GreenSock/pen/f960d221c5f4074d7c7ae3965edafa07?editors=0010 Is that what you're looking for?
  9. Actually, the next release has a tweak that automatically handles this for you, so you can simply align: "#path". I've already updated the live codepen version of MotionPathPlugin which you can see in the last demo I posted.
  10. I'm curious why you'd want to move to Flash. It's a pretty dead technology. We haven't actively supported our Flash-based tools for many years. You're welcome to use them, of course, but I'd personally recommend being very cautious about moving your project to Flash.
  11. @jollygreen I'm totally confused. Can you show us an example of that? I can't imagine how that'd work. Like @Shaun Gorneau said, "visibility" isn't an animatable property (what would the halfway-between value be exactly? visibility: "kinda"? ) I'm sure we're just misunderstanding something about what you're saying/wanting, so it'd be super helpful to see a reduced test case, perhaps in codepen? And why exactly are you NOT wanting to use autoAlpha? The entire point of that special property is to handle both opacity and visibility for you. So it seems perfect for the effect you described, but again, I must be missing something.
  12. Okay, so the issue here is that even though you set border-radius in your CSS, getComputedStyle() in Firefox reports it as blank! I'd certainly consider that a bug in Firefox. In the next GSAP release, I work around this by sensing that condition and then pulling the value from borderTopLeftRadius. It seems to work well. Feel free to try it for yourself in the beta file: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Better?
  13. I actually think that might compound the problem because: The minified files would technically be different than all the other files with those same names, like the ones that reside on the CDN. The path to the map file would be different...so it'd be weird to have two files with identical names and are the same version of GSAP...but contain different contents. My understanding is that it's a widely-accepted convention to keep the .map files with the files they describe (same directory) It'd add yet another folder to the zip, making it potentially confusing/intimidating for users to understand which things they need and which folder(s) to use. I'm inclined to just stick with the convention we're using everywhere else (including on the CDN) and have the map files reside with the minified files.
  14. Actually, all you need to do is set useRadians: true in your motionPath vars. Sorry, we're still working on the docs, so not everything is there yet. But this should make it pretty easy for you - no proxy necessary. https://codepen.io/GreenSock/pen/bGNjpKo?editors=0010
  15. Yes, that's actually by design and it's easy to "fix". Just set curviness: 0. That's it. The reason it behaves that way (easing in and out of each position) is because that's typically the desired behavior when things are traveling through points. Imagine animating the scale of something through various values - it's a really nice effect to have it kinda ease in and out of each position, but that's DIFFERENT than the easing of the playhead across the overall tween. Anyway, the default curviness is 1, and when you're dealing with a 1-dimensional animation like this (only the "x" property), that affects the easing in/out of each value along the way. Setting curviness to 0 basically forces it to be completely linear. Does that clear things up? https://codepen.io/GreenSock/pen/0a8b82bf4a01c9d696398d13b49f1f0b?editors=0010
  16. Yeah, that "//# sourceMappingURL=DrawSVGPlugin.min.js.map" line is purely for browsers with Dev Tools open, and it tells them were to get debugging information about the raw (unminified) source code. Totally optional and you're welcome to ignore that. It's not really an "error" at all - think of it like metadata for developers. I can put the .map files into the /minified/ folder in the bonus zip in the next release if that'd help. I originally thought they might just confuse people, but perhaps it's helpful for cases like this.
  17. @ZachSaucier is correct - GSAP just uses Math.random(), so unless I'm misunderstanding your goal I don't think seeding is possible.
  18. Hm, your codepen is using 1.19.0 which is from 2016 so that couldn't be from our home page. Anyway, I'm glad it's all figured out now. Happy tweening!
  19. Sorry to hear about the trouble, @SeriousTimber. Unfortunately, it's just way too time-consuming for us to troubleshoot a live site that uses 3rd party plugins (ScrollMagic is not a GreenSock product) and your codepen obviously has a ton of problems (it's not loading GSAP, it has PHP code, a bunch of minified CSS, and almost 300 lines of JavaScript). If have a GSAP-specific question and can provide a reduced test case with only the bare essential code, we'd love to help. This definitely had me confused/concerned: .add(function() { $("#growth").css("-webkit-transform", "translate(0px, 100%)"); $("#growth").css("transform", "translate(0px, 100%)"); $("#connect").css("-webkit-transform", "translate(0px, 100%)"); $("#connect").css("transform", "translate(0px, 100%)"); }) Why are you doing that? Seems like it'd be infinitely better to just .set("#growth, #connect", {yPercent: 100, xPercent:0, y:0, x:0}) And a lot of your tweens are animating to percentage-based x or y but you should use xPercent and yPercent instead. Perhaps you could just identify a simple part of your animation that's not working, and isolate that in a codepen?
  20. That's just an order-of-operation thing. One of the biggest benefits of using GSAP is that you always get consistent order-of-operation with transforms, but you've got an edge case that uses a non-standard ordering of the transforms (you're rotating FIRST and then translating but usually it's the other way around). Trust me - consistent order of operation is a GOOD thing If you need an explanation as to why, let me know. There are many ways you could solve this with GSAP. The simplest is probably to just put the element in a container and rotate the container. Another option is to do the math to figure out where the x/y translation would be at that particular rotation and then skip the rotation altogether. Here are both solutions in a forked codepen: https://codepen.io/GreenSock/pen/5b4de068efd5061dfa965fab06d53ed7?editors=0010
  21. No worries! Glad you figured it out. Thanks for pointing out that incorrect link. It should be fixed now. 👍
  22. Welcome to the forums, @hmerscher. First of all, I'd definitely recommend using the latest version of GSAP. Your codepen was using a SUUUPER old version. The new syntax is cleaner too. The main problem was that there's an ease applied to the rotation. If you remove that ease, you'll get that seamless effect. https://codepen.io/GreenSock/pen/f4dc44a73a6a538905fd4a555c1e4330 Does that help?
  23. Thanks for being a Club GreenSock member, @Wayrse! Something sounds strange here - you must not be loading the file you downloaded. The only file that has that redirect code ("Oops!...") is the file hosted online via our Codepen account. Perhaps you downloaded a codepen zip with that file and used that locally? Maybe do a search on your hard drive for MorphSVGPlugin and make sure you don't have any surprises. As long as you use the one you downloaded from your account dashboard, you should be golden - that doesn't have any restrictions embedded in it whatsoever. Maybe you could even try swapping out your file for the uncompressed version (MorphSVGPlugin.js in the "umd" folder, not the one that ends in ".min.js"), just to verify you're using the right file. If you're still running into trouble, please zip up your local project directory and shoot it to me in a private message so I can take a peek. I'm sure we'll get it figured out. Happy tweening!
  24. Well, that's a tricky scenario because in order for any animation to play, it must be on a timeline (think of it like a record player, where the animation is the record and the player with the needle is the timeline). GSAP includes some logic so that if an animation gets popped off of a timeline (which happens as soon as its done, by default, on the global timeline or any other which has autoRemoveChildren:true) and then its playhead is later adjusted, it automatically gets added back to its previous parent so that it can continue playing. Without that logic, it'd just be stuck. However, I see why you'd be confused by the behavior in your particular scenario. I think it's reasonable to add some logic so that it only gets added back to a timeline that has autoRemoveChildren:true which is limited to the global timeline by default. That'd deliver the most intuitive results for the most cases from my estimation. I've made that adjustment in the upcoming release which you can preview here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Better?