Scaling of motion paths (102.9 KB)

Hi! We have some problems with the pinning behavior of elements on animation paths. While all other elements react on different browser window widths like they should, the animation path leave the maximum width of the stage when the browser window becomes bigger as the maximum stage width is. That means, that all elements are on the stage while the animated element leaves the stage. It seams that the scaling of the motion path is orientated to the browser window width and not to the stage. Is this correct?

I’m a little uncertain on what you’re trying to do with the document, but I believe the motion path is scaling correctly, and it might be that the other elements are more static in comparison.

This could be illustrated by adding elements at the start and end point of the sun’s motion path. If you have the same pinning settings, you can see those will be at the same points.

The background doesn’t scale as it isn’t set to (and SVGs behave a bit differently as well anyhow). What you may want to do is create a group for the motion path animation, and set that to use a Content Overflow (in Metrics inspector) as hidden. This will clip the sun.

Hi Jonathan! Thanks a lot for your answer. Your solution works well, although I do not understand what’s the problem with the pinning I did.

I’d boil it down to a few factors:

  • Turning on the right and left pins doesn’t center in the window, it keeps items proportionately placed to the container. (a side effect is that if an item like your background is placed in the center, then it will stay in the center because that is its proportionate position).
  • the scene edge technically expands to the entire window when the document is set to scale width 100%, so items won’t be clipped where it was as the scene is now much wider
  • you’d want the background to scale a proportionate way to keep the width valid (this is a feature coming in Hype 3.5

I’ll also note if you were just looking to center the animation you don’t need to use flexible layout since it is centered by default when not using it.