Hype Motion Paths

Motion paths in Hype can be created in Hype by combining the top and left position into a Motion Path function. The path is represented as a dotted blue line on the stage and can be seen when the play head is in the range of an animation and the element animated is selected on the stage. Converting a regular animation into a Motion path can be done by dragging on the regular preview of the two independent properties top and left. Once you drag on the blue dotted preview line, it is converted into a Motion path making it a Bézier curve used to animate your element. Alternatively, you can convert an animation into a Motion path by click the little icon besides the properties in the property display on the timeline. As a side note, the dots in the line are a preview of the easing function progression.

Motion as a function

Once you convert the regular top and left property into a Motion Path these properties will be removed from the Hype interface for the element in question and replaced with a Motion Path property. This is owed to the fact that going forward the properties top and left are the product of a function and depend on a Bézier curve calculated by Hype. The path you see on your screen is a so called "Bézier curve" and derives the values for your positional properties through math. The path you see on stage is a visual representation of said math function. Another takeaway form this conversion is that the easing function no longer applies to the properties top and left but to the time (t) progression of the Bézier curve.

Bézier curves

The Bézier curve [be'zje…] is a parametrically modeled curve. Bézier curves are often used in computer graphics because of their optical elegance and their relatively easy mathematical handling.

P₁ and P₂ would be the Bézier handles (smooth anchor points, intermediate points) and P₀ and P₃ the anchor points (control points) of your path. To learn more about these very popular curves, the history and math behind them and about mathematician Pierre Bézier continue to read at Bézier curves on Wikipedia.

Rotation follows motion path

Hype allows you to orient the element you're animating along the path rotation. This adds a very realistic touch to any animate element as it simulates forward-looking agency. A thing to note, the rotation value of the element can be influenced independent of the automatic applied orientation toward the path. Hence, you can use it to correct or additional rotation.