52 Posts later i have finished the service/start page of my Portfolio. Never thought i could actually make so much content out of it. Thanks a lot for the support along the way! 😊 But it's page 1 from 4. Three more to go. Next up will be the contact page. (On the Marquee i just used placeholder for now) ⚙️ Tech Stack so far: Webflow (@webflow) GSAP (@greensock) (InertiaPlugin, Draggable, CustomEase) Locomotive Scroll (@LocomotiveMTL) A lot CSS

Added an animation when opening the contact page. The biggest part is the movement to the right of the title. This was a bit trickier because, in the beginning, it should be positioned directly next to the first word. I initially started calculating the spacing between the two words in JavaScript to transfer a value to a CSS variable. I also needed to add an EventListener for resizing, but it felt like too much effort for such a small detail. Then I came up with another idea. In CSS, we have the unit "ch". 1ch is the width of the character "0" (zero) in the current font size. We can also use the ch unit for translate. In my case, it was: translate: calc(-2.85ch - (clamp(3.5rem, 0.3889rem + 7.1111vi, 7.5rem) + 1rem)) 0 0; The clamp() function was used for the width of the GIF image between the text. This way, it also works perfectly when resizing the window down, because it's based on the font-size without using any JavaScript. The only problem was that ch is based on the font size. So when using a custom web font, it doesn't use the size of the web font immediately. This is because the web font needs to be downloaded first, but the value is set before it's loaded. One solution was to adjust the size-adjust property in font-face to make the fallback font match the size of the custom web font. This is also a great way to prevent layout shifts. Another approach, which I used, is setting a "fonts-loaded" class on the tag once the font is actually loaded. For this, I used the Font Loading API in JavaScript to check if the font has been downloaded. Then, I applied the ch unit only when the "fonts-loaded" class was present. All good. But then I resized the window wider to the point where the fluid font size stops and has a fixed size. Yeah, now the width between changes based on the viewport. 🫠 So back to the calculation and adding the viewport. calc(var(--vw, 1vw) * -100) Using a --vw variable here, which gets 1% of the client width from JavaScript. Because when we use 100vw, the scrollbar on the right will not be subtracted. That's why so many Webflow & Framer sites have a horizontal scrollbar. calc(var(--vw, 1vw) * -100 + (var(--grid-margin) * 2)) Adding the grid margin here, which I'm using as a variable. Multiply it by 2 because we need one to get exactly before the viewport and the second to get exactly right before the left title. calc(var(--vw, 1vw) * -100 + (var(--grid-margin) * 2) + 12.125ch) Then adding the ch unit so we also respect the fluid font size. In my case, it was 12.125ch. The only value left is the clamp() from the GIF we used before. translate: calc(var(--vw, 1vw) * -100 + (var(--grid-margin) * 2) + 12.125ch - (clamp(3.5rem, 0.3889rem + 7.1111vi, 7.5rem) + 1rem)) 0 0; And finally it works across all breakpoints. The downside of this ch approach is that it’s not dynamic. I can't change the text and expect it to work automatically. I need to adjust the values if I want to modify the text. But since it's a headline, I probably won't change it for a long time.

@Vladekx Thanks man! Happy that you could learn something from the stuff I‘m sharing! 😊

RT @eduardbodak: Accordion with the HTML <details> element in Webflow. I built the accordion here using the details/summary tag in Webflow…

There you go:

@round Thanks! 🙏

@nonzeroexitcode 😎

@vipulkumar_dev 🙏😊

@orionEsu I‘ll try my best to share some cool stuff 🙂

RT @eduardbodak: How to build an accessible accordion in 2025? There is a native HTML tag <details> which handles the open/close state for…

CSS Tricks Tutorial: Cloneable:

@Threeaio Thank you very much! 😊

@conterent Thank you! 🙏✨ I‘m using @screenstudio to record the videos. And when I need more animations @jittervideo helps me a lot. It even got better with an infinite canvas now 🤓

@tonyblu331 Yeah I started also to use JS and added a is-top/is-bottom class based on where the mouse moves in and out. But then found this solution with CSS which was way easier 😃

@flowzaiofficial Thanks! 🙂

@anjaadesign 😊🙏

@plantseeds_ Thanks man! I will try my best! 💪