Jump to content

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!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. @Vamsee Jasti I'd welcome your input here. Has there been any movement toward whitelisting GSAP? If not, is there a particular thing getting in the way? As I mentioned above, I'm working on a complete rewrite for GSAP 3.0 with an aim to make it even smaller, more efficient, and we're adding some features as well as making the API more concise. Perhaps with the launch of 3.0, that can also serve as an opportunity for your team to whitelist it for AMP (if there isn't willingness to do it for 2.x)? Again, if there are sticking points that need to be addressed, I'm all ears. I'd also be curious to hear your input regarding the last few comments above and why it's not feasible to just port GSAP to CSS code or a minimalistic tool.
  2. I'm sure that sounds pretty simple, but there are actually all kinds of problems: What about eases that simply can't be replicated in CSS keyframes, like Elastic, Bounce, CustomEase, etc.? What about situations where individual transform components like rotation, scaleX, scaleY, x, y, etc. are animating independently, like in overlapping ways? CSS animation keyframes can't do that properly. What about browser quirks and inconsistencies, like animating SVG transforms? For example, transform-origin is notoriously buggy across browsers and percentage-based values simply aren't supported. Are we really considering it a "win" to output 100 CSS keyframes to avoid 1 line of GSAP code (and loading the GSAP library...which could easily be cached ubiquitously) ? I could go on Are you saying they allowed "Bodymovin'" but they won't allow GSAP yet? [scratches head] Do you know what the reasoning is there? I'm genuinely curious.
  3. If I understand your question correctly, sure, there are multiple ways to do that. That's basically what MorphSVGPlugin does. See https://greensock.com/morphSVG Or if you need fine-grain control of each point, you could just animate their coordinates as generic objects and use an onUpdate to apply them however you want, like in an SVG path data string (or whatever). Does that answer your question?
  4. Welcome to the forums, @brainybiz. As far as GreenSock is concerned, we certainly don’t mind if you use the public tools (like TweenMax) in a theme as long as you’ve got the proper license (and if your theme is totally free, you wouldn't even need any special license from us). However, we can’t speak for WordPress or what they allow legally on their end. I’d recommend contacting them if you have questions about that. My understanding is that GPL is pretty tricky because it imposes some very strict (and in my opinion, burdensome) requirements that aren’t very business-friendly. I’m not a lawyer, so I very well could be wrong about this, but I believe the GPL infects everything it touches, meaning that if you use GPL software in your project, you MUST open source your entire project as well under GPL (which is why it can be very unattractive for businesses in competitive spaces). According to https://www.gnu.org/licenses/gpl-faq.en.html#FSWithNFLibs it looks like it may not be compatible. GSAP is “free” in most cases (though of course NOT the bonus plugins) but since there’s a particular type of commercial usage that requires a paid license, it’s not 100% “free” in ALL cases. Again, none of these restrictions are imposed by us - if WordPress requires a GPL-compatible license, the restrictions are on their end. We encourage folks to use our tools as much as possible, including in themes. Over 8,000,000 sites use GSAP (and rising). We’re definitely not trying to be restrictive. I hope that helps. In case you haven't seen it already, I'd definitely recommend reading about the "why" behind our license here: https://greensock.com/why-license. We firmly believe our licensing model is ultimately a GOOD thing for end users like yourself. Thanks for asking about this - I appreciate your desire to do the right thing when it comes to the licensing. Let us know if you need anything else. Happy tweening!
  5. Yeah, it's probably tree shaking. All you need to do (most likely) is reference PixiPlugin somewhere in your code, like: const plugins = [PixiPlugin]; //feel free to add other plugins to the array. Good luck with the project. ?
  6. [crickets chirping...] Nice to see you back around the neighborhood, @ohem. Yeah, the main GSAP forum is pretty active but there never was a ton of activity in the banner-specific one but I don't think that's any indication that the industry isn't thriving. I find that banner folks tend to be pretty locked into their own process and not terribly eager to expose their methods to others. And if they have a question, they may just post in the main forums. I don't do banner work, so I'm the wrong guy to ask. Maybe someone else will chime in. I suspect there's plenty of banner work going on out there, though. Good luck with your next endeavor! Hope to see you chiming in regularly here too. You're up to 321 likes which is pretty respectable!
  7. Sorry about the frustration, @WebDynamix. We really do try our best to provide answers promptly and it can be challenging without a demo but I see your point about this being a seemingly straightforward question. From the reader's standpoint (without context), it wasn't totally clear if your issue would be best solved by: creating your artwork differently in your editor just reversing your animation itself (you could tween a tween, like from a progress of 1 to 0, maybe just reverse(), etc.) reverse the array of points that you were feeding in (as @PointC suggested). I think that's why folks were politely asking for a demo. Anyway, hopefully the reverse() tip @PointC solves things for you. I hope you've seen that we work really hard to keep a positive, warm, welcoming tone in these forums. That's something that makes this community unique. And please keep in mind that most of the experts around here are just trying to help others out of the goodness of their hearts. Happy tweening! Good luck with your project.
  8. Are you saying you'd like us to spend time developing something that'd help you NOT use GSAP? Doesn't this assume that amp-animation can match all of GSAP's capabilities? I'm pretty sure it can't even come close, so how would such a tool work? Would it have to find all the missing capabilities and console.warn() about each and every one and then leave it to you to find alternate solution? Sounds pretty fraught with headaches. I'm hopeful that the AMP folks just allow/whitelist GSAP, especially given its marketshare and performance. I'm working on 3.0 right now and am pretty excited about all the features plus we're reducing file size by dropping support for super old browsers like IE8. It's shaping up nicely. But it won't be ready for probably a couple of months (it's a lot of work).
  9. One other tip: if you only call GSDevTools.create(), it's global so it tries controlling EVERYTHING which can be challenging especially when you're creating new tweens & stuff. It's often better to wire it to a particular animation like: GSDevTools.create({ animation:yourTweenOrTimeline, globalSync:false //now it only cares about your one animation, nothing global! });
  10. Yep, exactly right. Right again Indeed, we place a huge priority on performance since animation is the most performance-sensitive part of UX. In all my years of doing this, I think this may be the 2nd or maybe 3rd time someone has wanted this kind of functionality, so it'd feel weird to make everyone else pay the performance (and file size) penalty for adding that functionality, especially because it's pretty simple to add it externally. For example, you could just implement an add() and remove() (or to()/from()/whatever) function in your own code that has the event dispatchers built-in. Think of them like wrappers around GSAP's functionality. See what I mean? It's just one more layer of abstraction.
  11. Just to clarify, this isn't the case. A set() call is just a zero-duration tween. When the playhead travels past that point (in either direction), it will trigger it accordingly. The main point of confusion here (I think) is a misunderstanding about what repeating actually means and the work GSAP does. When a tween renders for the first time, it records the starting and ending values internally so that it can very quickly interpolate between them on the fly on each tick. If you rewind the playhead and play that tween again, it doesn't go back out and try to read the then-current values again to re-record things internally. That's typically very wasteful. It sounds like you were expecting it to keep calling that function to get new values. But that wouldn't be a true "repeat", as things would change You can tell a tween to forget its recorded values and have it re-initialize the next time it renders by calling invalidate() on it. Same for entire timelines. So you could accomplish what you're after by removing the repeat logic completely from your initial demo, and just use an onComplete: var tl = new TimelineMax({ onComplete: function() { this.restart().invalidate(); //restarts and forces it to re-record starting/ending values } }); Does that help? I like the suggestions @PointC and @mikel made as well. Oh, and the modifiers thing wouldn't be good for this because a modifier literally gets called on EVERY render. So your example would have various values constantly changing randomly in the text (about 60 times per second). Let me know if any of this doesn't make sense.
  12. I love that you noticed. It's a very meaningful distinction that we work hard for around here I agree. I think that'd look weird. Sometimes things sound good in our head but then when we actually see it, it's like "oh, yeah, that's not what I want." I'm curious why you're even using SplitText at all. That last chunk is the only multi-word one, and you don't even want to animate them accordingly, so maybe you can just dump that altogether and simply do from/to tweens instead of staggerFrom/staggerTo ones, like: https://codepen.io/GreenSock/pen/b096727c2f2ada17fb9c9ec38526bc6d Also, here's a little demo we did a long time ago that even adjusts the duration of each animation based on the length of the words (so people have enough time to read them, and the pacing is what it needs to be in terms of readability): https://codepen.io/GreenSock/pen/sxdfe?editors=0010 Happy tweening!
  13. There are a bunch of ways you could do this, and I'm not quite sure which effect you're after but here's a fork that might be close: https://codepen.io/GreenSock/pen/321d558bd58fe43f7083a29aab813bb2 Basically, you can just create your animations linearly, but then actually tween the playhead of the main timeline in a way that has an ease! If, on the other hand, you actually want to keep the fading durations consistent (so each one fades at exactly the same rate, but you're only accelerating the duration of the text staying opaque), that's a whole different beast (more complex, but doable). Just let us know exactly what effect you're going for and we'll see what we can do. If you're merely looking to accelerate the staggers themselves, you'll love the new advanced staggering feature that was added in GSAP 2.1. Read about it here: https://codepen.io/GreenSock/full/jdawKx I hope to see your name on the membership roster soon
  14. Hi Rich. This sounds more like a Flash/Animate CC question than a GSAP question. I'm not very familiar with how that software exports videos these days but I wouldn't be surprised if it doesn't really honor script-based updates. I'm sure there are tools out there that can take a SWF and convert it to video, but I'm not familiar with them, sorry. Maybe someone else around here knows. If you have any GSAP-specific questions, we'd be happy to help.
  15. Welcome to the forums, @Thinkingbox Developer. Sorry, but it's really tough to troubleshoot blind and this doesn't really sound like a GSAP issue. I'm not a Webpack guy, nor do we support the 3rd party gsap-promise library, so I'm not quite sure how to help here. Oh, and by the way, I'd strongly recommend using the yPercent:110 instead of y:"110%" format to be explicit about percentage-based values. That's totally unrelated to the issue you posted about, of course. Are you using the latest version of GSAP? And did you install it from NPM?
  16. GreenSock


    Great catch! Sorry about that. One digit was wrong in the code. Doh! It should be fixed now. ?
  17. Welcome to the forums, @khagedra. Unfortunately, ScrollMagic isn't a GreenSock product and we don't support it here. We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/. If you have any GSAP-specific questions, we'd love to help. Good luck with your project!
  18. Unfortunately, ScrollMagic isn't a GreenSock product and we don't support it here. We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/. If you have any GSAP-specific questions, we'd love to help. Good luck with your project!
  19. Are you trying to do this?: this.endDrag()