Hi there,
I’m trying to achieve the following: A title should be scaled down gradually to a font-size of 0 based on scroll interaction. The attached demo is already doing that quite well, but there are two issues:
When resizing the window, the initial font size, which is set with the VW unit directly in CSS, does not scale anymore. I’m aware that GSAP is converting the VW to PX internally. Is there a way to work around that?
Currently, the scaling of the font size happens "too quickly". In the demo, one can see that the distance between the scaling text and the red box below it increases, the smaller the text gets. This is not how it supposed to be. The gap between them should stay constant.
Requirements:
The titles cannot be images/SVGs, they need to stay pure text
The initial font size has to be set with the VW unit (or at least needs to be responsive)
Very thankful for hints and tips on how to solve this!