Jump to content
GreenSock

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

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!

GreenSock

Administrators
  • Posts

    13,198
  • Joined

  • Last visited

  • Days Won

    409

Everything posted by GreenSock

  1. First of all, thanks for being an advocate for GreenSock at Zynga! ? And yes, I'm pretty sure that it's an overwrite issue. Try setting overwrite:false on your tween(s) or you could just set TweenLite.defaultOverwrite = false. The plugin you're using doesn't look like it handles the overwrites properly. So every "transform" tween, when it renders for the first time, will kill any other "transform" tweens that are running at that time. See what I mean?
  2. That's a pretty cool effect indeed. Definitely not a simple thing to explain how to do, sorry. I think it boils down to Cubic Bezier points that have some physics applied affecting their positions in relation to each other. I wish I had time to do a whole tutorial, but it's no simple task.
  3. Yeah, I suspect it could be an overwrite thing or (more likely) mishandling of transforms. We had to do a bunch of work to ensure that all the transform components can be independently animated, plus a whole bunch of other transform-specific challenges. See https://greensock.com/transforms for details. I don't see them handling all that stuff in the "transform" plugin they created, but I'm not very familiar with exactly what they're doing, what constraints there are with native, etc. I must admit it feels a little weird to be spending time troubleshooting a 3rd party plugin that's "borrowing" GSAP's API/code (ineffectively). ?
  4. Just so you know, you can use any of the bonus plugins on codepen for free. We created special trial versions which are all listed here: https://codepen.io/GreenSock/full/OPqpRJ/ I whipped together a helper function that'll simply invert an ease for you. Just feed in the ease and it'll spit back a new one that's inverted: https://codepen.io/GreenSock/pen/rgROxY?editors=0010 Here's the function: //feed in an ease and get back a new inverted version of it. function invertEase(ease) { if (typeof(ease) === "string") { ease = CustomEase.get(ease); } return function(p) { return 1 - ease.getRatio(1 - p); }; } Does that help?
  5. Hi @Emilek1337. Welcome to the forums. It sounds like you're talking about a simple yoyo. You can set repeat:1 and yoyo:true on a TweenMax or TimelineMax instance to get that effect. Or just reverse() the animation anytime. If you still need help, a codepen would be super helpful so we can just tweak things in your context. Happy tweening!
  6. Glad it was helpful. I just added it to the "Helper functions" in the docs: https://greensock.com/docs/HelperFunctions Happy tweening!
  7. The jump is completely normal because of the way transforms work (totally unrelated to GSAP). If you scale something from its bottom left corner, it ends up at a completely different place than if you scale it from its upper right corner. If you want to change it dynamically without the jump, you'd need to compensate its translation (x/y). Here's a fork of your codepen that uses a function I whipped together for that purpose: https://codepen.io/GreenSock/pen/ffd4d338f911617756aa1daaa96d8c5d?editors=0010 The function is: function smoothOriginChange(element, transformOrigin) { if (typeof(element) === "string") { element = document.querySelector(element); } var before = element.getBoundingClientRect(); element.style.transformOrigin = transformOrigin; var after = element.getBoundingClientRect(); TweenLite.set(element, {x:"+=" + (before.left - after.left), y:"+=" + (before.top - after.top)}); } Does that help?
  8. Ah, if I understand your goal correctly, that's a perfect use case for advanced staggers and the "distributeByPosition()" helper function. Here's a fork: https://codepen.io/GreenSock/pen/323f316865aa827e0adbb13fd14fc5ec?editors=0010 That helper function allows you to distribute the stagger based on the position of elements. Notice I set axis:"x" so that it only factors in the x-coordinate of the elements (by default it's both x and y coordinates). Is that what you were looking for? Here's more info on advanced staggers: https://codepen.io/GreenSock/full/jdawKx
  9. There's internal logic to only use matrices in certain scenarios (mostly related to rotation). I'm pretty sure it's more performant to do it that way. If you're noticing a difference (negatively), can you please provide a reduced test case? I'd love to see it. I just doubt switching to matrix() would help at all when you don't have any rotation.
  10. I'm not sure I understand the question - are you asking us to read through all the source code and show you how to rebuild it with GSAP? Or you just asking if it's possible? As far as I know, GSAP can do everything anime.js can do plus a whole lot more (though I don't mean that as an insult to anime.js at all which I have lots of respect for). So yes, I'm sure it's entirely possible to do virtually any animation using GSAP. Is there a particular GSAP-related question we can help with? I'd love to help, I'm just not totally sure what you're asking here.
  11. It is admittedly a gray area, yes, but as long as they're only using your tool to create these animations and they don't edit them apart from your tool, they wouldn't need to purchase their own license unless they're charging multiple customers too. In other words, the standard "no charge" license would apply to them (and we'd appreciate it if you made that clear in your licensing doc to your users). Otherwise it would obviously create an easy way to circumvent the GreenSock license. But my guess is that most of your customers will NOT be using these animations in a commercial context like that and they won't be editing things apart from your tool (and I also assume your tool wouldn't be directly competing with GreenSock), so their usage would be covered by your "Business Green" license. See what I mean? The posture we take with licensing in general is to work hard to keep it from being an impediment while at the same time being responsible about creating a funding mechanism that'll ensure ongoing development and support. Sometimes it's a fine line. Are there some situations where we risk being taken advantage of? Sure. But we firmly believe that most users want to do the right thing and they'll eventually support our efforts because ultimately it benefits them too (especially the ongoing support). We trust that if we just keep putting value into the marketplace, it'll respond and we'll be just fine. That gives us confidence in cases like this to air on the side of generosity and leniency. We hope that'll also translate into happy customers who are very loyal and spread the word about GreenSock. ? Thanks again for caring enough to understand and honor the licensing terms. We love serving users like you.
  12. Oh, we'd be happy to answer any questions about ScrollToPlugin or GSAP or anything like that. But from what I can tell, this has nothing to do with any of that. I did notice that you've got your click event handler using this selector: ".smothscrollclass a[href^='#']" but your "about" link does NOT start with "#", thus it never triggers that event handler. It just treats it like a normal link. I didn't see any dynamically-loaded things, so maybe your codepen isn't representative of the real context, but maybe you just need to fix your selector text for your click handler. Or maybe I'm misunderstanding your goal/question. Was there something about GSAP that we could help with?
  13. Welcome to the forums, @hybreeder. This sounds like more of a ScrollMagic or general question rather than a GSAP-specific one. You might want to ask the author of ScrollMagic (it is NOT a GreenSock product) if you're having issues related to that. I'm not very familiar with it. I wish we had the resources to answer everyone's general questions or questions about 3rd party products, but definitely let us know if there are any GSAP-specific things we can help with.
  14. Welcome to the forums, @bUu2188. This would be a much more performant way of doing something like that: https://codepen.io/GreenSock/pen/f9755131132e06ef1173a846f7e7ee31?editors=0010 I added some animation so that it's not so jarring. It just feels better to my eye Happy tweening!
  15. It looks like you forgot to import ScrollToPlugin. And you might want to reference it directly in your code somewhere just so your bundler doesn't dump it with tree shaking. As for the rest of your question, it sounds like maybe it's more Vue-specific but correct me if I'm wrong. We're happy to answer any GSAP-specific questions. I'm personally not familiar with Vue.
  16. There were several problems. First, you were using document.getElementsByClassName(".st1") which returns a NodeList (like an Array), but you were treating it like it'd return a single element (by appending .addEventListener(....)). You can't addEventListener() to a NodeList/Array. Also, you used the wrong selector text. It should simply be "st1", not ".st1" because you're using getElementsByClassName(). I'd recommend switching to document.querySelectorAll() which is more flexible and you can use that selector text (".st1"). You had logic that'd cause things to grow when the mouse LEAVES them (instead of when it rolls over them). I assume that behavior was inverted, based on what you said in your question. I wasn't sure if you wanted each piece to animate independently, but here's a fork: https://codepen.io/GreenSock/pen/07568569cbe81411ec128eb0a9f542c4?editors=0010 Does that help?
  17. Good catch, @MSCAU. You're absolutely right - there was a small bug that'd cause subsequent relative non-px values not to work correctly. It should be resolved in the next release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better?
  18. I noticed several problems: You still appear to be loading external SVG assets. The browser will not allow you to access the contents of those, so you can't morph them because it'd require JavaScript reaching in and altering them (a security violation). You must inject the SVG inline. Like...literally, the SVG code itself must be in the DOM (not an <object> or <img> tag) Your codepen has <html>, <head> and <body> tags, as well as <script> tags pointed at invalid addresses. None of those should be there (codepen puts the html/head/body tags in place automatically).
  19. Yep, @mikel and @Jonathan are exactly right. Also, I'd strongly recommend using yPercent:200 instead of y:"200%" so that you're very explicit about the effect you want. Technically what you have will work in this case because internally GSAP noticed the % and converts it internally to be yPercent for you, but keep in mind that you can combine "y" and "yPercent", so if you tried doing another tween later to something like y:100, you'd end up with BOTH y:100 AND yPercent:200. It's just safer to be explicit and use the built-in yPercent or xPercent whenever you do percentage-based transforms. Another minor note: your SVG is using a crazy-high amount of precision in the numbers which makes the strings VERY long. If you clean that up so that it uses only one or two decimal places, you'd probably cut the size of your SVG string in less than half kb-wise. Faster loading, and I doubt anyone would ever notice a difference in the visual fidelity. Just a suggestion. Happy tweening!
  20. It's probably due to the fact that you've got "async" on the script. So it doesn't wait until GSAP loads before executing your other JS. Also, you do NOT need to load TweenLite if you're already loading TweenMax because TweenMax has TweenLite inside of it. If you're still having trouble, please provide a reduced test case so we can see the issue in context. We'd be happy to take a peek. Happy tweening!
  21. Welcome to the forums, @kichostone. I'd suggest loading and injecting the SVG contents into the DOM, and then animating them there. Browsers don't let you easily control the guts of externally-loaded SVGs the way you're asking (if I understood you correctly). It's a security thing.
  22. Well, if you don't want to just rewind your animations, you could simply record the state initially for the elements, and revert as you please. Like just record the style.cssText as well as the "transform" attribute, and then re-populate those when you need to reset those. See what I mean?
  23. Is there a reason you wouldn't just rewind your timeline to make things go back to their initial values? Like animation.progress(0) or animation.time(0) or animation.pause(0). If you want to revert the values and kill the animation, you could just animation.progress(0).kill(). There seemed to be a lot of extra (unnecessary) code in that demo, so I'm wondering if perhaps I'm missing something. Why exactly are you trying to clearProps? And if you're trying to restart your animation, why not just call .restart() on it?
  24. There were quite a few problems I saw, so I just took a crack at revamping it in the way I think you wanted it to work: https://codepen.io/GreenSock/pen/xNaRZM?editors=0010 Does that help? Thanks for being a Club member!
  25. If I understand your question correctly, you can't really do something like that because the first time a tween renders, it records the starting/ending values so that it can very quickly interpolate them on-the-fly during the animation (a very important performance optimization). So you can't just change a variable that was then set as a property on a vars object and expect everything to adjust. You could, however, just re-create that tween whenever you need that value updated. In other words, don't just hard-code a single instance and then keep trying to update it. Instead, re-create the tween/timeline when appropriate. Or you could update the vars object of the tween and invalidate() it so that it's forced to re-record the starting/ending values on the next render. Does that help?
×