Animate an element across entire browser, at any browser width

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)

The API is built in :wink:

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?

edge-to-edge-animation-test-API.hype.zip (14,4 KB)

Thanks for your help! I assume the API is part of the latest Hype 4 since I can’t open the file. Running 3.6.10. I’ll look to upgrade shortly :wink:

The API is nothing new and it certainly isn’t exclusive to Hype 4. Here is a Hype 3 version:
edge-to-edge-animation-test-API-Hype3.hype.zip (15,1 KB)

PS: Buying Hype 4 (Pro) is certainly a good investment, though!

1 Like

Appreciate the speedy response. This is a huge help. Was not aware of that part of the API. Definitely opens some new possibilities for us. Thanks!