FontSize not updating to dynamic values on resize

[ElephasHyd]

Hi everyone,

I am trying to  animate a text element to dynamically fit the horizontal dimensions of the browser window using the fitText function and GSAP. However, I've encountered an issue where, upon resizing the browser, the initial font size briefly adjusts but then reverts to its original size. Despite few days of troubleshooting, I haven't found a solution. The font size fails to update promptly during resizing and only aligns correctly with the screen dimensions after a manual page refresh. Here I am trying to update the font-size --> fontSize: initialFontSize

Font resize issue (codepen.io)

Your guidance would be greatly appreciated.

See the Pen XWGzVoo by ElephasHyd (@ElephasHyd) on CodePen

[GreenSock]

Welcome to the forums, @ElephasHyd. 

 

It looks like your fitText() function has a window "resize" event handler that's trying to recalculate things frequently during the resize. And you didn't code it in a way that'd allow the animation to dynamically adjust - it was just using the initial "from" size. Here's how you could do it: 

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

 

Oh, and you were trying to animate lineHeight from "normal" to "90px", for example, but you can't really interpolate between those - you need to have some kind of numbers for GSAP to animate, so I set line-height to 1em in the CSS. You can use whatever you want, as long as it's numeric. 

 

Does that help? 

[ElephasHyd]

 

2 hours ago, GreenSock said:

Welcome to the forums, @ElephasHyd. 

 

It looks like your fitText() function has a window "resize" event handler that's trying to recalculate things frequently during the resize. And you didn't code it in a way that'd allow the animation to dynamically adjust - it was just using the initial "from" size. Here's how you could do it: 

 

 

 

Oh, and you were trying to animate lineHeight from "normal" to "90px", for example, but you can't really interpolate between those - you need to have some kind of numbers for GSAP to animate, so I set line-height to 1em in the CSS. You can use whatever you want, as long as it's numeric. 

 

Does that help? 

Thanks Jack!❤️ . You are awesome.

This fixed the issue, really appreciate.

Yes, lineHeight is another problem I am trying to solve. The same height from text to top of the div(white background division) is not applying across all the resizing, if I load page in mobile & go to desktop text is going behind the previous div. And if I give manual lineheight, the div height is increasing and showing unnecesary blank space before another division.

[GreenSock]

23 hours ago, ElephasHyd said:

Yes, lineHeight is another problem I am trying to solve. The same height from text to top of the div(white background division) is not applying across all the resizing, if I load page in mobile & go to desktop text is going behind the previous div. And if I give manual lineheight, the div height is increasing and showing unnecesary blank space before another division.

I'm not quite sure what your goal is or what problem you're describing, sorry.  I resized my demo a bunch and I don't see any problems, but maybe I'm missing something obvious. Can you please explain the problem in more detail, and tell us how to reproduce it?

[ElephasHyd]

Sorry, Jack. I wasn't able to articulate the issue clearly. Let me break it down, and please review the provided screenshots.

 

In Screenshot 1: After refreshing the page in the Mobile viewport and resizing it to Desktop, you'll notice that the text overlaps with the top division.

In Screenshot 2: Upon refreshing the page in Desktop and resizing it to the Mobile viewport, a significant gap becomes apparent.

 

The spacing is inconsistent across all viewports during resizing. I aim to regulate the space above the text, ensuring a consistent 20px padding above the text in that div for all viewports and resizing scenarios.

 

I'm already appreciative of your assistance, Jack. If there's any way I can support GSAP, whether through a subscription, consultation services, or any other form of contribution, please let me know—I'm eager to help.

[GreenSock]

Ah, okay, now I see what you mean. That's because you're locking in the starting lineHeight at the initial load. I'd make that dynamic too, setting it in the fitText() method. But since the visual font height is very different than the ACTUAL font line height, I created a couple of extra settings in your fitText(): 

• lineHeightMultiplier - like 0.7, indicating that you'd have to multiply the line-height by 0.7 in order to get the top of the visual font to roughly touch the bounds.
• lineHeightOffset - like 20, where it'll adjust the lineHeight to push it 20px further down. 

So the combination of those lets you do exactly what you were requesting: 

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

 

I dropped a red <div> in there just to show where 20px is. ✅

2 hours ago, ElephasHyd said:

I'm already appreciative of your assistance, Jack. If there's any way I can support GSAP, whether through a subscription, consultation services, or any other form of contribution, please let me know—I'm eager to help.

You don't need to feel any pressure to do anything, but I sure appreciate your heart in wanting to do that. Pretty much all of what we do is supported by Club GSAP memberships. When you're ready and you see the value, feel free to sign up, but there's really no pressure to do so. We go out of our way to try to have a very different vibe as a company and in these forums. Our goal is to treat others the way we'd want to be treated, and I certainly don't appreciate when people seem to do something nice to help me and then I find out they expect something in return and heap guilt on me if I don't comply. Yeah, that's not how we roll around here. But thanks again! 

[ElephasHyd]

Jack, I appreciate your suggestion, and while I attempted a similar approach before, there's a notable issue. It adds height to the entire division, causing additional blank space at the end after scrolling down. Pinning only text(.fit-text) also not helping as it is creating huge space to it once after scrolling. This becomes more apparent with shorter text. Regrettably, I may not have conveyed this issue effectively in my previous post.

I tried using onUpdate approach in scrolltrigger, obviously it is calculating whole div height again, so it may not be a solution.

See the Pen KKEZNKo by ElephasHyd (@ElephasHyd) on CodePen

 

14 hours ago, GreenSock said:

You don't need to feel any pressure to do anything, but I sure appreciate your heart in wanting to do that. Pretty much all of what we do is supported by Club GSAP memberships. When you're ready and you see the value, feel free to sign up, but there's really no pressure to do so. We go out of our way to try to have a very different vibe as a company and in these forums. Our goal is to treat others the way we'd want to be treated, and I certainly don't appreciate when people seem to do something nice to help me and then I find out they expect something in return and heap guilt on me if I don't comply. Yeah, that's not how we roll around here. But thanks again! 

I appreciate the thoughtful and pressure-free approach, thank you for fostering a respectful community.

 

 

[GreenSock]

Oh, I think I see. That strikes me as logically problematic for a couple of reasons: 

• You're animating something that's causing a layout reflow on every single tick (not great for performance), and adjusting the overall height of the pinned element. But in order to do its pinning properly, that pinned element needs to be put into a pin-spacer element that holds its place in the layout to prevent collapsing. In general, it's a bad idea to ever animate the very same element that you're pinning. In this case, you're sorta doing that by adjusting the contents which affect the overall height of that element.
• Since you're trying to collapse the whole pinned element dynamically, that has a direct impact on the overall height of the page...which has a direct impact on the available scroll distance...which could make it impossible to complete. For example, imagine you the start/end positions for the ScrollTrigger are 500, 2000. You scroll past 500 and it starts shrinking everything such that the entire page is now much shorter and you CANNOT get to 2000! It's usually a bad idea to have scroll-based things on a page where the entire scrollbar size is totally changing around constantly WHILE scrolling. 

The effect you're going for might be doable with enough elbow grease (custom coding) - you're welcome to contact us about paid consulting services if you'd like because this type of thing is definitely beyond the scope of help we can provide for free in these forums. 

[ElephasHyd]

Thanks Jack. How can we proceed furthur? Is there any where I can reach out?

[GreenSock]

I sent you a DM ✅