How can i make this scale properly?

Hi everybody,

so i made this "slider" where i can slide between 3 images .
It all works in the browser when i switch on "responsive mode" in the webdevtools with a resolution of 320 x 568

but i want this "slider" to work in any resolution. Does anyone know how to make it scale without loosing its layout ? Also the animation needs to scale too ....

heres the project : https://gofile.io/d/9HxkMe

Try Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

i tryed it, it doesnt solve my problem, it even makes it worse, i have the feeling you havent had a look at the project tbh O:) but thank you :slight_smile:

The key thing that Max’s suggestion does is it keeps the ratio correct between different sizes: when an object is scaled up and down it will maintain proportions. Or maybe you’re embedding this within something else that we don’t know about?

If it's not proportional scaling you are after maybe then use scenes as picture containers and instead of animating them manually all in one scene use the built-in swipe gestures and scene transitions for each section. That way you don't have to worry about the animation (fixed width) to match the screen width. Good luck.

Update: Yes, I dropped the ball on supporting a fellow Hype user on this one. The one thing I keep rediscovering is the flexible layouts. Only activating the arrows in the middle gives you axis scaling (see @jonathan fix in the next post). The one thing I keep rediscovering, is that this stretch distorts the coordinate system so animations actually scale with the container! Great actually.

Looking at the document, I think the hint you may be looking for is to turn off all the margin pins. When all the margin pins are on, the groups will try to preserve margins to the container. Since your groups are outside the bounds this won't work too well. When you turn all the pins off (and have the scale on) it will then just proportionately position and scale itself to the group container.

Screen Shot 2020-09-17 at 11.53.42 PM

Here's a version with this:
scalingQuestion-fixed.hype.zip (22.8 KB)

(the "grab me" doesn't quite work right, but this can probably be fixed by placing them inside the group)

Does that help?

hey Jonathan :slight_smile: thank you so much :slight_smile: this was exactly the solution i was looking for :slight_smile: , unfortunatly i cant get the buttons/button animations to scale properly ... i tried different kind of groupings,... but i cant find a way to get them on the edge of the screens, theres always a distance between the edge and the button .... so if you dont have an ideas about it, i might go with a solution where there is duplicates of the buttons :slight_smile: ....

thank you again :slight_smile: it helpsed a lot :slight_smile: yeeey :slight_smile: :slight_smile: :slight_smile:

Does this help? scalingQuestion-MZ.hype.zip (19,8 KB)

1 Like

Did my email to you yesterday get through? It had an attachment and sometimes those are rejected...

hey guys :slight_smile: 1st let me carify, im certainly overwhelmed by the amount of support you give me :slight_smile: i was realy close to running down a deep rapidhole of javascriptcode, because i couldnt get it to work :slight_smile:
thanks to you guys im very close to the desired solution without code :slight_smile: yeey :slight_smile:

@MaxZieb the problem with the project you send me is , that the grab me button disappears off screen
@Daniel yes i got your email :slight_smile: but your project didnt use the full screen size 0:)

so i got realy close to what i want (see attachment)
i want one button between the two images, that snaps to the edge of the screen, but its only one button :slight_smile: its supposed to morph
i made a quick hack with two buttons just to show what i mean, but it feels weired, because you can drag the button off screen ...
animation only works from pic1 -> pic2 didnt implement it the other way arround

scalingQuestion - one button challenge.zip (18.5 KB)

If you want one button, you could just add an animation at the end that moves it to the left or alternatively exceeds its group bounds so that the right half is still shown after the swipe.