Animation didn't fit with website dimensions

Hi people. This is the first question I share on this forum. I have an animation with a landscape that repeats itself to give the impression of movement to two other elements in the scene. however, this process of looking for the next element (the landscape) to repeat itself and create a sense of movement, creates a margin on the right side of the browser. how could I establish that the animation would always maintain the dimension of the document without bringing this "additional" that is the image that is repeated?
this is a print screen example:
and here is the HTML in action: Teste Rio Pinheiros
I really appreciate any help :slight_smile:

1 Like

Great animation!

I think the only way to truly solve this would be to add sections/make the animation wider so that it can fit much more. You may be able to leverage symbols so you only need one animation and can use some instances for the repeats.

In lieu of doing that (it sounds like you don't want that route), you could probably use the Flexible Layout system. This would allow you to stretch out elements to fit its container size.

The most basic would be to put everything in a group, turn on all pins/sizes, use "zoom contents" and then choose the scaling behavior to "expand to fill". However this might grow things in a way that doesn't match the other content. You might also be able to not use zoom contents, and instead scale the background components. You may even be able to stretch them non proportionately and it will look okay for the most part (while keeping the bikers not scaled at all).

Hello Jonathan :slight_smile: Exactly I'm using Flexible Layout. there are 8 different screens from mobile (where it works very well) to desktop dimensions.
see here in the "inspect" how the thing is going. at the end of the video, I show the 8 screens of Hype.

Looks great! I see you marked my post as a solution - to clarify, you got it working correct with the flexible layout options?

Hi Jonathan. Yes, the problem I was facing I finally solved by changing some breakpoints and putting 100% on the layout scale. But your comment and tips gave these insights :slight_smile: So, thank you for trying to help me with this issue.

1 Like