I want to animate an element to animate edge to edge (from right corner to left corner of browser), no matter what window size, and also for the element to remain a consistent size (so not scaling up or down to the window size).
Is there a certain combination of Flexible Layout settings that will allow this to work? I understand how to achieve this using simple Javascript, but want to know if its possible using Hype built-in functionality, and also without creating additional layouts. I want this to accommodate even very wide browsers
Attached is the closest I’m able to get. I want the 100x100 box to animate right corner to left corner, and for the box to stay 100x100 at any window size. It’s almost there, but not quite corner-to-corner (space to the corners vary as the browser gets larger/smaller). edge-to-edge-animation-test.hype.zip (11.2 KB)
And it always will as the positional data and hence coordinate system is "stretched" proportionally for the animation. So you will always have the square either overlapping the edge or not quite reaching it apart from when getting very close to the original width.
Here is a version with the API. Although it needs to fetch the size of the surrounding DIV from the styles as the API only returns the “orginal” value. Anybody else got a better solution?