12345

Hi Rodrigo, thanks for your help! I think I might have oversimplified the CodePen. The reason I can’t use position:absolute (at least in my understanding) is that eventually, the animation should end (either by timeout or click) and the letter should return to its original position, which is centered in a fixed header. It is not going to be a single letter either, but a word that I split with SplitText. So there’s a couple of letters floating around. Makes sense? I’ve update my CodePen slightly to illustrate this better.

I found this older topic that basically does what I want, but for GSAP 2: I then created https://codepen.io/dsdsdsdsdsds/pen/RwmRwRL to try to implement it for GSAP 3, but I struggle to keep the animated element within the viewport. Also, it seems that every now and then it does not update to new random coordinates, but keeps the ones from the previous iteration. Any idea how I can get it working? I tried various options like yoyo, onComplete, onRepeat, using a timeline etc.

@mvaneijgen Thanks for the update! The problem with using fontSize (and why I think @Rodrigo switched to using CSS vars) is, that when resizing the browser window, it does not update the font size responsively anymore. EDIT: Just realized that I scope the CSS variable in the live code anyway, so it’s working without problem now. The issue really was the easing using a default value. Thanks a lot! Great support here.

Hi @Rodrigo Thanks for the super quick response and your help! I could update my live code so that it is responsive now. However, I might have made my codepen a bit too simple or too far away from the actual live code, that’s why I updated it here: https://codepen.io/dsdsdsdsdsds/pen/LYXjMMV The issues I have now: The content in the red box almost stops when it’s close to the top of the viewport, like it gets pinned there. I’m not sure what causes this, as it is less visible in your example (without any text content inside the red box) I actually have two of the same animations below each other. When I do that, the second title is hidden behind the blue spacer. Sometimes, it pops up after I scroll past the title and back up, but it is hard to reproduce constantly. Any idea what causes these issues?

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!