animation not resizing with browser window
I've ran into is this problem: while the canvas is sizing properly to fit various browser w/h params, the animation itself does not resize to accommodate the new size, despite the canvas being set using CSS to the 100vh/100vw... and using resizeDrawingSurfaceToCanvas() in conjunction with the matchmedia/change event listener. So what I've ended up doing is coming up with a function that would calculate the layoutScaleFactor dynamically based on viewport height and adjust it based on the window being resized, but I feel like this is not the proper way to do it... In addition when using the this workaround, the hitboxes in the nested artboards are not updating properly during the sizing so the animation triggerS incorectly…
so I need some help figuring out what I did wrong - be it on the animation side or on the renderer setup side…
It sounds like the fit type fit.Layout , right? Layout is a special type that lets you create responsive designs without scaling everything. The layoutScaleFactor is how you scale without messing up the responsiveness. If you switch to something like fit.Cover or fit.Contain, it should work. Let me know how it goes. :)
Thanks Lance - yes I am using fit.Layout, and I am creating responsive layouts and I have three timelines with an anystate root in the state machine, and conditions based on aspect ratio. That being said, how would I achieve a responsive design if the animation doesn't scale with the window size - then even though the canvas is correctly sized the animation is too big for the screen on mobile or on 1:1 aspect ratio?
I attach my project file - perhaps you can have a look and let me know if I am doing anything incorrectly in terms of the setup, to achieve responsive layout design?
the workaround that I use is to use the layoutScaleFactor dynamically and calculate it based on the height of the viewpoint so on every change/resize of the window it updated the layout factor, however an issue i encountered is that the hover on/off hitbox that I use for a custom cursor over the character gets shifted from its position in the project file, and I can't seem to fix it...
please help me with that,
thanks in advance!
I understand now. Sorry for the confusion. :)
First off, I think your solution of mixing Layout and layoutScaleFactor is perfect. It gives you all the benefits of a responsive design, while giving you control of how much space that design should take up.
As for the hit areas moving around, I haven't been able to replicate the issue, but maybe I'm using a different runtime or version than you are?
Hi
Here's a codesandbox that demonstrates the issue with the hitbox:
and I was unable to get it to work using layoutScaleFactor
I've came up with a different approach where I have created responsiveness by creating a blend state between min/max width height of the artboard and the positions/scale of other elements. the blend state layers are controlled by number inputs, and then then on change/resize i set the number inputs in such a way that the new aspect ratio of artboard/animation is the same as the innerHeight/Width of the browser window. here’s a code sandbox for you to take a look:
while this works perfectly in the editor, in the browser while I get the correct calculations for each window change (you can see console log output) but in many aspect ratios I still get black bars on top/bottom…
this approach works well, but I am struggling as to how to get it to play nice and fill the entire window at every aspect ratio…