Animated (+ fixed) position text

I’m trying to create something like this: https://bersardi.com/.

The text on the left that reads the name (Ber Sardi) comes into the viewport from top to bottom and then, stays there. Doing that much was fairly easy, but, my problem is with making it responsive. If we scale our browser window on that webpage, we can see that the text still sticks to the bottom of the browser window. Now, I wanted to create the similar thing. I want the text to stay there even when the browser window is scaling.

I’ve made a sample document: Example.hype.zip (14.6 KB)

I’m not sure what your head html code is doing, but if you remove it all then I believe this will work how you want. (though I’d change the scaling behavior to shrink instead of expand, personally).

As a side note, I see this in your code:

setTimeout(function()
	{
	hypeDocument.relayoutIfNecessary()
	},10);

This will kill browser performance. What are you trying to do?

That code in the is based on this post: Page content getting clipped. Is there any other way of achieving it without killing browser performance?

Also, yeah, I’m aware that removing that part fixes the issue, but, also my page content then starts going out of browser viewport and thus, horizontal scrollbars start appearing (there’s no content other than the text in the example scene, but, any content towards the right of the page becomes an easy target of clipping).

The HypeLayoutRequest callback gets triggered as a consequence of the scene size changing or a relayoutIfNecessary() call. I’m not sure what cases you would ever need to constantly be calling it. You could be winding up with thousands of calls per second with what you are doing.

Why not reposition those elements with flexible layout then?

So, here is the updated example by making the scene like the example link I sent. I have removed the problem code from head and tried it with flexible layout (though, there are chances that I’ve used it in a wrong way). I’m unable to position my content according to the example.
Example.hype.zip (24.2 KB)

If you slowly change the width of a browser window with your above example, you’ll notice that it has several different breakpoints. You could do this in Hype via different Layouts, though it may be a bit heavier-weight than desired.

Regardless, you can achieve the basic effect with margin pinning, and then it would be up to you to decide when to scale further to keep the result in line. They treat height a little different than Hype can; different software will produce different results.

I’d basically not use zoom contents on a group, but instead set each element individually how you’d like. So then individual elements would use the pinning you want; for example the HOME could look something like:

1 Like

Yeah, I had noticed one or two breakpoints more than the average, didn’t know there are many.

Got it. Thanks.