How to scale animation path?


(Cremer) #1

I am trying to create an animation for my website. The animation should fill the whole width of the browser window. Also the drawing area should scale with the size of the browser window.
Now I want to send a circle from the right side to the left side after a click on it. This works fine as long as I don’t change the browser window. If I now enlarge the browser window, all elements will be scaled, which is correct. But if I now click on the circle, it only moves to an area near the center instead of to the left edge.
I’m wondering how I can scale the animation path so that the circle is animated to the left edge even with larger browser windows?


#2

Hi Cremer - Welcome to the Forum!

Attached is a simple example of the motion path scaling with the resizing of the browser window: AnimationPath_JHSv1.hype.zip (12.3 KB)

There is just one element… the Ellipse with the motion path.

In the “Scene Inspector” - under the “Scene Size” section at the top:
The checkboxes for scaling both the “Width” & “Height” are selected.

SceneInspector



In the “Metrics Inspector” - “Flexible Layout” section:
All four sides of the Ellipse are pinned.

MetricsInspector


(Cremer) #3

Hi Jim,

Thank you for your detailed description.
The problem was that I hadn’t pinned all four sides of the circle in the Metrics Inspector. That had totally confused me.
Thanks again for your help!

Take care,
Florian