Jump to content

GreenSock last won the day on July 2

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on July 2

GreenSock had the most liked content!

Community Reputation

7,915 Superhero

About GreenSock

  • Rank

Contact Methods

Profile Information

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

Recent Profile Visitors

47,929 profile views
  1. Wow, thanks for pointing that out Craig! And we're at over 93,000 total posts, so another milestone is approaching. Pretty cool indeed! I'm super proud of the tone that all the moderators set here. It's truly a unique place on the web, so my hat's off to all the participants. And yes, to the lurkers - dive in, the water is nice and warm. PS: GSAP 3.0 is shaping up very nicely. When released, I'm sure these forums will be even more active
  2. I don't have time to analyze things in-depth, but I did notice that you just nested the "autoKill" incorrectly: //BAD: .to(window, 1, {scrollTo:".footer", autoKill:false, ease: Power0.easeNone}) //GOOD: .to(window, 1, {scrollTo:{y:".footer", autoKill:false}, ease: Power0.easeNone}) It's fine to pass a string like that directly to scrollTo, but if you're defining more values that are scrollTo-specific (in this case "autoKill"), you need to use the object syntax. I suspect this is what was causing the dragging of the scrollbar to kill functionality (doing so killed the tween).
  3. Yeah, and try referencing the plugins somewhere in your code just to prevent your build system from dumping them as a part of its "tree shaking" process. Like: const plugins = [ScrambleTextPlugin, DrawSVGPlugin]; //merely to prevent tree shaking
  4. A few quick comments: Be careful about will-change. https://greensock.com/will-change The invalid morphSVG tween error means you forgot to load MorphSVGPlugin You can try setting CSSPlugin.defaultForce3D to true or false to see if one of those helps (default is "auto").
  5. Welcome to the forums, @Minjong! It looks like your imports are fine, but the problem is that you've got some malformed code, like: //BAD: (there's no such thing) TimelineLite.to(...) //GOOD: var tl = new TimelineLite(); //create a new timeline instance tl.to(...); //then add stuff to it Does that clear things up?
  6. @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.
  7. 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.
  8. 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?
  9. 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!
  10. 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. 🙌
  11. [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!
  12. 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.
  13. 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).
  14. 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! });
  15. 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.