Chromium

The beautiful combination of white-space: nowrap and clearProps works like magic. But I do have a follow-up question... so the example in my CodePen was for very simple HTML elements but what I'm applying these animations for is the following elements (please see the following GIF): For contextual purposes, the animation above is being applied to each white rectangle element simultaneously. The animation is also a bit slowed down for better visual debugging. As you can see, the content of these elements is a bit more rich than the elements in my simpler CodePen example. And so, this adds some complexity to my animation. While awesome for my CodePen sample, due to the removal of white-space: nowrap at the end of the tween animation (once the tween finishes and runs clearProps: 'margin-left, white-space, overflow'), you see this height jump at the end. So I have the following 2 questions: Is it possible to animate the removal of white-space: nowrap so that the height jump happens a bit more smoothly? Is there a better way you could think of animating this? Haha I know the last question is a bit of a broad question fishing for suggestions... but given the fact that each white rectangle element that's being animated can be any unknown height (due to its content), I see no other options than to do it this way. Lol

white-space: nowrap!!!! Dang it! You mean to say that I didn't have to do all these height calculations all this time ? AND it solved my choppy CodePen animation!!! ?‍♂️Now that's just rubbing salt on the wound! Lol Thank you for the 1-liner @PointC! Now that solves 3 out of the 4 questions! So now I'm simply doing: t1.set(_listEls, { 'white-space': 'nowrap', overflow: 'hidden' }) At the start of my animations. So this question still remains: This question assumes that I don't know what inline styles were added by the timeline.

So I've found myself almost always having to do the following (as can be seen in the CodePen) for responsive elements that don't have a fixed height: t1.set(_listEls, { height: _listEls.outerHeight(), overflow: 'hidden' }) Whether it's with .set, .from, .fromTo, etc. At the start of every animation that involves an element's width or left/right margins. This is so as to simply avoid the element's responsive handling from triggering and overflowing/increasing in height as it shrinks (during the animation). That being said, I am wondering if: Is this the best way to go about this or am I missing a much simpler way? While this addresses the responsiveness of the element itself, it doesn't address the responsiveness of child elements from doing the same thing. Is there another quick GSAP trick (inline-style perhaps?) that deals with this particular problem that I'm sure is common when animating width/margins? Is there a way to remove those specific styles from the element on animation completion without removing any potential other inline styles on the element? Side note: Is the animation in the CodePen lagging just for me?

Haha yes, while that might be my end goal, the getting there is not limited to my own explanation of it. I'd like to get there in the simplest way that gets me there even if that's a different way as long as it will still allow me to efficiently achieve my end goal. Thank you for this suggestion. I think this might be a bit overkill for what I'm trying to achieve. Hopefully, there's a simpler way. Let me explain my end goal further below. Let me explain what exactly I'm looking to achieve (from start to end) and perhaps you can point me to the best way to go about it: Animate _listEls (as is already done at the start of the timeline in my CodePen example). Remove _listEls and prepend new _listEls (as is already done in the t1.call in my CodePen example). Re-animate the entrance of the new _listEls from the step above (this is where the .set followed by probably a .to would come in). During all of the above, I'd like to also animate a whole separate element in the DOM (let's call it _el2). So ideally, _el2's animation (or series of animations) total duration will span the duration of the animations of the elements from steps 1-3. I thought that the simplest, cleanest, and most concise way to go about all of these animations is to keep them all under the same timeline. But as you've explained, it seems that due to step 2, that is impossible. So what's the cleanest way you'd suggest to go about this? Edit: Maybe I'm overthinking this (as I usually do). Maybe I'll just finish the _listEls animations inside of the t1.call like you suggested (speaking of... doing t1.set inside the t1.call after removing and prepending the HTML seems to work in my dev environment but not in the CodePen example for some mysterious reason). And have a whole separate t2 timeline for the other element (_el2) that will run the other animations simultaneously to t1. I'm assuming this is the simplest and most elegant way of going about this.

Hi Jack, Thanks for the explanation. I figured it's a logic issue because I'm a little unclear about how the timeline works here. Looking at your code it seems all you have done is make the .set block into its own tween and move it inside of the t1.call. However, I am hoping there's a way to do the .set on the t1 timeline so I can continue animating these elements (and possibly other elements within the same timeline as well) ? I guess where my confusion lies is that I thought the t1.call happens in logical order in the timeline, so when I did t1.set, I expected that to happen after the t1.call is done with whatever it's doing (meaning remove and prepend the new elements and update the _listEls with the new selector accordingly). But it seems that is not the case... does the t1.call return before whatever is inside it is executed? If that is so, then is there a way to make the timeline wait for the t1.call to finish first (or is there a better way to go about this that I'm missing) ?

The CodePen is hopefully self explanatory. I'm going to lose my mind over why the second t1.set is not working. Also, assuming we do get it working, ideally, I'm hoping that there won't be a flash of content before the 'margin-right' is applied by the t1.set. Side note: any idea why it's choppy for the first 75% of the animation?

HOLY COW BLAKE!!! You the legend man! I can't believe I've existed for this long without knowing about this!!! I managed to store an object of timelines to the jQuery object but couldn't access it later for some reason. But that don't matter because I discovered something even better... we can store the same information directly to the DOM element using the data API. So now I've got this magical knowledge: if (defaults.show === 'show' || defaults.show === 'hide') { // Get the NOO Animation GSAP timelines for the object. let nooAnimations = _this.find('.noo-tooltip').data('nooAnimations'), t1 = defaults.show === 'show' ? nooAnimations.tShow : nooAnimations.tHide; if (t1) t1.progress(1).restart(); return _this; } You've unlocked a whole new dimension for me!!! Thanks doesn't cut it. You in town for a BBQ sometime?! Seriously though... every now and then I come across something that I'm shocked to not have known about for as long as I've been writing code... this has to top the list!

JQuery has something called plugins ($.fn.insertCustomPluginHandlerHere()) that gets called that way all the time so I'm not sure I understand why this is a problem? Furthermore, I'd still like to know if there are no other alternatives such as the above 2? (i.e. is it not possible to re-access the timeline through the jQuery object / DOM element? And/or can I register the timeline to the gsap object with some sort of label and re-access it again later?)

I've edited my previous response with a CodePen demonstrating my example. It will not run because t1 is undefined when the function is called via the onclick handler. I'm looking to solve this problem without resorting to globalizing the t1 variable outside the function or returning it to the main JS code. I'm hoping there is a better way such as the alternative solutions I mentioned in my last response.

Right on Blake! Thanks for the quick response and the examples! It actually seems like my entire problem is resolved once I initialize the timelines outside of the click handler like you suggested. It doesn't even seem necessary to force .progress(1) for some reason. However, this doesn't really address the main problem I'm truly trying to wrap my head around. What I'd ideally like to achieve is some component isolation... is it simply impossible to reference a gsap timeline from a jQuery object/DOM element? For example, I have a function, let's call it animateFunc(). This function gets called twice, once on page load, and the second time inside the onclick of a button. In the first call, the function initializes the timeline (let's call it t1) and its tweens in a paused state. When animateFunc() is called via the onclick (it knows this via a special parameter), it will trigger only a t1.restart() and return. The main problem I'm running into here (as you can probably guess) is that the timeline is undefined when the animateFunc() is called via the onclick. Now there are multiple ways to solve this, such as: Initializing the t1 variable outside of the animateFunc(). However, I'd rather avoid this due to my previously mentioned reasons. Making animateFunc() return the t1 variable and then providing that t1 variable back to the animateFunc() when it is called through the onclick. Again, I'd like to avoid this because I'd like to keep the animateFunc() uncoupled from any dependencies from the main JS. Which brings me to what I'm looking for as a solution that I can't seem to find, ideally I can think of 2 options: In the first call to animateFunc(), I'd attach the t1 variable to the jQuery object/DOM element so that I can access it again when the animateFunc() is called via the onclick. I suspect this is not possible as I found no mention of such thing anywhere. This one is less ideal, but I create some sort of object to keep track of the timelines and attach it to maybe the gsap object somewhere? I'm just spitballing at this point and I have no idea if this is the right way to go about this haha. EDIT: Here's a sample CodePen of what I mean: https://codepen.io/fuad-zeyad-tareq/pen/QWazXMo

Yes, I have looked at the https://greensock.com/mistakes which illustrates my exact problem in the CodePen. I've also looked at many related forum posts... but you know what? I just don't get it at this point. I don't get how something that seems so simple can be so daunting to achieve. As can be seen in the CodePen, there's a button which triggers an animation onclick. Spam the button 3 times in a couple seconds however, and the whole thing gets stuck! The article mentioned above makes it sound like the simple solution to this is to do a "fromTo" as opposed to a "from" or a "to" for the timeline's tweens (and by the way, what about "set" in this case?)... and I changed my timeline's tweens to exactly that... but alas, the problem still occurs. I know there are a bunch of ways to solve this particular problem; even though I can't seem to get even one working for me... Ideally, I'd like to achieve the following: The timeline should immediately stop and restart from the very first tween whenever the button is clicked. Yes, that means I don't care where it has reached at that point, I'd like it to restart. If I have clicked the button 3 times, the first and second animations should be overwritten by the 3rd. In other words, I expect to only see one full timeline animation after my last button click. Most of the solutions I've read in the other forum posts, approached the problem by setting the timeline to a variable outside of the onclick handler. Well if this is the only way to achieve what I like, then I can accept it. But ideally, I'd like to keep all the handling inside of the onclick handler so if we can do this while still keeping the timeline variable accessible only by the handler, that would be great. That being said, the closest I've gotten to at least stop the freezing animation from happening is when I simply moved everything that is currently inside of the click handler outside of it, and then only added t1.restart() inside the click handler. However, this resulted in unexpected behavior... when I spam clicked the button 3 times, while it successfully broke out of the first and second timeline animations, it actually still played all 3 timeline animations consecutively. In other words, after I stopped clicking the button, I still got to watch the animation 3 times when I only expected to see one animation for my last click. I think I'm close to getting it to behave as I want it to in this setup but this wouldn't achieve objective #3 from my list above. So if there's a better way that would allow me to keep everything to the click handler, I'd rather do that.

@mvaneijgen Sorry I'm still a little unclear on this. I've attached a screenshot of GSAP's starter template for example. Are you saying I can do this by changing the number 3 in the screenshot to whatever version I wanna test? What about GSAP plugin versions? Can I also test different versions of those? If so, do I just have to find wherever the number 3 is in those pictures and change it for the plugins?

Yeah I think you're right. Seems shortsighted though as it leaves this random huge limitation given how far we've come now. Thanks for the quick response anyhow. Saved me from wasting my time trying to animate these lol

Ah! Well that explains my failed attempts at animating them. Seriously though, pseudo elements have been out for how long now?! Lol

As can be seen in the Codepen. The <li> elements are being animated via the Splittext and they have a :before element but that's not being animated as part of the text. Any idea how to include it in the animation? On a side note, things get even more weird when the piece of code below is excluded. ul li { display: flex; }

Ah yes! Thank you for the confirmation PointC. That's why I couldn't replicate it in a CodePen. I suppose it's not possible to test an older version of GSAP with CodePen is it? I wonder if this is a glitch only applicable to an older version of GSAP. EDIT: Yup it was an old version of GSAP that had the glitch. ?

Say I have the following: <p>This is a line split by a special span here <span style="padding: 0 5px;">*</span> but we're still going.</p> The problem with any kind of left and right padding inside of a split text seems that the splittext cannot handle it. And instead, we're left with the padding being abruptly added at the end of the splittext animation. I tried to add a simultaneous animation for the padding but that obviously doesn't work because the splittext overwrites the content during splittexting with divs as you're probably already aware. How would you suggest handling an inline-span with a left/right padding within a splittext div?

Ahah! Yes, that's it. I ran across that from a forum post and read it there. Thank you @PointC. Way to be both right and wrong at the same time. Yay me!

Hahahaha. Right! Well... it wasn't an article (oops). It was a response from GreenSock to someone using GSAP 2 in their CodePen in the forum somewhere. ? Sorry I can't be anymore detailed as I was going through a bunch (of forum posts? ?) last night... you know, debugging problems.

It was this one. Your bouncy dot on the "i" sunk me in. Hook, line, and sinker is the saying right? Lol On a more serious note, I was only slightly familiar with GSAP (from a separate project I worked on) prior to reading your article. I was (and still am) a big newbie when it comes to SVG animations. I was struggling to get an SVG to draw itself... nicely. That's when I ran into your article. Your article, in combination with the simplistic yet beautiful looking timeline tweens, and most importantly, the bouncy dot on the "i" of course, sold me to use it on my new project. I don't regret it! Nice website btw. Only slightly jealous of it lol

Mostly out of curiosity. When I read that article about v4 breaking compatibility with v2 I thought, with how awesome your scripts currently are while still maintaining compatibility with v2, v4 must have some big stuff coming. That being said, it would have also made it easier to convince someone to update their v2 GSAP. Lol ? PS: It was one of your articles on cassie.codes that convinced me to get GSAP. So well done! Lol

I am simply curious as to whether you guys can give us any indication of when to expect GSAP 4. I've only ever read about it once in an article from 2 years ago by GreenSock mentioning that it was far off in the future. I'm curious if it is near in the future now perhaps? Any extra spicy details you can share on it would be welcome too (anything to look forward to?). My only understanding so far is that GSAP 4 is going to be the less friendlier version of GSAP 3 as it will break most compatibility with GSAP 2 and below.

Ahahaha. Guilty as charged! Though to be fair, not being able to set the fill attribute to a linearGradient's class kinda made me assume that you can't put a class on linearGradients at all. This makes the world of difference! I was even able to slightly improve the efficiency of the code (since in my case I had 8 unique gradients) with a for loop!!! tl.from(...) .to(...); gradients.forEach(gradient => { t1.set(circle, { fill: `url(#${gradient.id})` }) .to(gradient.querySelector("stop"), { attr: { offset: "100%" }}); }); t1.to(...) .to(...); }); Thanks for the fast and efficient response Blake! And awesome work with GSAP guys. Your scripts are some of the best I've seen in years!

So I'm trying to animate the fill for multiple SVGs (the same SVG shown multiple times on the page) using Linear Gradients and animating the offset for said gradients using GSAP. While I have successfully done that for one and multiple SVGs at a time, I seem to be hitting 2 different problems that I'm struggling to wrap my head around. I have the following scenario, imagine putting the same SVG that requires the same animation mentioned above multiple times on the page. I've wrapped each of my SVGs with a simple div that I then target via a jQuery.each for loop and create a new timeline for each SVG (wrapper div). I've hit the following roadblocks: All goes well if all the SVGs have the same repeat value. As soon as I customize this repeat value to something different for any one of the SVGs, all hell breaks lose. This is demonstrated in my CodePen above. When circle #2 is set to a repeat of "2"... it seems to stop when it's supposed to but it also doesn't...? I really can't even explain what's happening here. It seems like this is simple enough that it shouldn't cause a problem but then again, #2 below is quite a big problem that may or may not be relevant to this one. This one in particular I'm not certain is involved in problem #1 above, but if it is, then it would certainly explain the erratic behavior seen in the CodePen. It seems that one of the greatest (and worst) things about SVGs is linear gradients. Since I've got the same SVG multiple times on the same page, perks of that is that they all share the same linearGradient IDs... based on my research that would cause erratic behavior as the IDs are meant to be unique not just per SVG but per the whole DOM. Shocker! I don't know why we're limited to IDs then... but that's a rant for another day. Now before you say just change the IDs for each SVG, or even create a backend for loop that adds a unique token for each repeated ID, please have a look at the JS in my CodePen to see why that wouldn't make sense for my use case. Long story short, my JS animation code would also have to exponentiate in size and that would be impractical. If my theory is correct, and the problem here is the linear gradient IDs not being unique, what can you guys say are my options? Are there any solutions to the linear gradient IDs that you guys know about that suit my use case? Or are there better ways to achieve my fill animation without linear gradients? I don't know why but I didn't seem to find any easier fill animation options for SVGs than this. Also keep in mind that my true SVG is far from a simple circle, so a solution like a moving <span> might be far from optimal in filling only a few objects inside of an SVG with many objects. Apologies in advance for the headaches this may cause.