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


Posts posted by GreenSock

  1. Sure, you should be able to import the ES modules from a local directory (doesn't really matter where). in your download zip, you should see a bonus-files-for-npm-users directory - that has all the bonus files. Just drop that somewhere in your project and import accordingly. Does that help? 

  2. Glad you sorted out your issue. 


    And I wasn't trying to discourage you from using ScrollMagic at all - I just wanted to be clear that it's not a GreenSock product so these forums may not always have answers for ScrollMagic-related questions, that's all. But I hear great things about ScrollMagic and plenty of people love using with GSAP. I don't have an alternate recommendation right now :)


    Happy tweening!

    • Like 1
  3. Welcome to the forums, @Pradeep KS


    It's tough to troubleshoot by just looking at a few snippets of code, but I wonder if maybe you loaded your scripts AFTER your code? Just a guess. 


    I'm also a bit confused about the way you're loading those scripts - I don't recognize that syntax. I'm used, to seeing <script> tags. If you're using a build system (looks like it since you've got node_modules), perhaps you need to import the proper classes? 


    If you're still having trouble, please provide a reduced test case that reproduces the issue so we can take a peek. Also, please keep in mind that ScrollMagic is NOT a GreenSock product and we don't support it. 

    • Like 1
  4. Yep, just to be clear about why this is happening...

    1. In order to maximize performance, GSAP caches the transform values after the first time it parses them because typically it's a huge waste to read the computed style again and decompose the matrix() or matrix3d() into the components (x, y, scaleX, rotation, etc.). You can force GSAP to re-parse them by setting parseTransform:true on your tween, but I'd strongly recommend always handling transforms directly through GSAP so that you get maximum performance. It also avoids rotational ambiguities that come from decomposing matrices (that's just the nature of them - it has nothing to do with GSAP)
    2. You had a percentage-based translate transform on your element that was set in the CSS, but when the browser reports the computed value it's always as a matrix() or matrix3d() which never contains percentage-based information - it's all converted to px, so GSAP simply cannot know that your intent is to use percentage-based values. This is another reason why it's best to use GSAP for all this because it'll store all of that data for you and keep it crystal clear for all future tweens :)

    So to "fix" your old version, you can just set all those values through GSAP (best), or you could simply add parseTransform:true to your tween and put a tl.invalidate() in your click handler so that it tells the timeline to re-initialize things on the next render. 


    Like @ZachSaucier suggested, the simplest, most bullet-proof solution is to just use GSAP for it all instead of mixing CSS and GSAP.


    Happy tweening!

    • Like 3
  5. Without a codepen demo to see the context, it'd difficult to know for sure but typically it's best to just set a perspective on the parent element rather than a transformPerspective on the element itself. I assume you're doing some 3D-related transforms? 

    • Like 2
  6. I noticed you've got allowEventDefault:true on the Draggable. Have you tried deleting that? 


    I know that when building Draggable, it was a huge nightmare trying to normalize all the browser behavior with click/drags/pointerEvents/mouseEvents/touchEvents because they all have various bugs/quirks/differences. That's one of the reasons we have an onClick handler in Draggable - so you can save yourself from some of these nightmares and let us handle them internally :) I'm curious why you're trying to avoid using it. 

    • Like 3
  7. Yeah, nothing is really sticking out to me, other than perhaps the element is getting removed from the DOM mid-tween and those browsers are choking on the getBoundingClientRect() call. Have you tried calling TweenLite.killTweensOf(yourElement) on unmount (or whenever it might be getting deleted)? I don't think anyone else has reported any issues like this, so it seems like a bit of an edge case that's super tough to diagnose blind :(

    • Like 1
  8. 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 :)

    • Like 5
  9. I don't have time to analyze things in-depth, but I did notice that you just nested the "autoKill" incorrectly:

    .to(window, 1, {scrollTo:".footer", autoKill:false, ease: Power0.easeNone})
    .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). 

    • Like 3
  10. 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


  11. @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. 

    • Like 3
  12. 3 hours ago, emmanuelulloa said:

    Nope, it will only "render" opacity and transform.  So you put in a tween and it spits out from 2 to 100 css keyframes.


    I'm sure that sounds pretty simple, but there are actually all kinds of problems:

    1. What about eases that simply can't be replicated in CSS keyframes, like Elastic, Bounce, CustomEase, etc.?
    2. 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. 
    3. 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. 
    4. 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. 

    • Like 2
  13. 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? 

    • Like 2
  14. 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!

    • Like 4
  15. 3 hours ago, hanesjw said:

    I'm back. This worked up until I did a production build using webpack. I get a console error saying 'PixiPlugin is undefined'. I'm assuming the tree shaking is the culprit but I can't seem to find a workaround...


    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. ?

  16. [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! :)

    • Like 1
  17. 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.

    • Like 4
  18. 44 minutes ago, emmanuelulloa said:

    It would be nice to have some sort of js functionality into GSAP where I would put in a regular tween and it will output an amp-animation JSON.


    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). 

    • Haha 2
  19. 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: 

        globalSync:false //now it only cares about your one animation, nothing global!


    • Like 3
  20. 1 hour ago, PointC said:

    I know he likes to keep the codebase lean and mean so things that are called from other event handlers aren't always included. That's the reason there isn't an onReverseStart() callback.


    Yep, exactly right. 


    1 hour ago, PointC said:

    There are no callbacks for those events you listed, but you'll have to be firing some sort of function to make those things happen so you can put the necessary logic or action in those functions.


    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.

    • Like 2
    • Thanks 1
  21. 14 hours ago, ZachSaucier said:

    GSAP assumes that only the animations should be repeated when the timeline is replayed, not the .set() calls and and animations. 


    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. 

    • Like 2
    • Thanks 1
  22. 45 minutes ago, iuscare said:

    So far, many thanks for the help I`ve found in this forum. While other forums like stackoverflow unfairly stamps questions as stupid very fast, it seems, like everyone in this community is always polite and keen. 


    I love that you noticed. It's a very meaningful distinction that we work hard for around here :)


    51 minutes ago, iuscare said:

    I tried to get my head around my issue and I think it does not make much sense to keep the fading rate of the staggered items themselves consistence.


    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."


    57 minutes ago, iuscare said:

    is there an easy way, to animate the whole array element at the end of the animation and not just every word of it?


    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: 


    See the Pen b096727c2f2ada17fb9c9ec38526bc6d by GreenSock (@GreenSock) on CodePen


    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): 


    See the Pen sxdfe?editors=0010 by GreenSock (@GreenSock) on CodePen


    Happy tweening!

    • Like 3