Motion graphics moves, part 2 · #06

Motion path

Moves along a curve that you define. A paper plane follows a dotted path, turning as it goes and looping the loop on the way.

Motion techniquesmotion-pathpathcurvetrajectoryfollow-pathorient-to-pathloop

Full motion specification

How the movement works

Use it whenever something should follow a set route: a flying object, a car, a journey on a map.

01One pass per 4.7 s, from off-screen left to off-screen right. The path is x = 270 + 112θ − 150·sinθ, y = 106 − 74·cosθ for θ = −π→π, which makes a loop at the top centre.
02θ advances in proportion to time (so the speed along the path is not constant; the loop looks slower).
03The plane turns to the path direction: angle = atan2(74·sinθ, 112 − 150·cosθ).
04The path is shown in advance as a dotted line (width 6, dash 2/15). A mint trail of 24 segments (0.03 in θ each) follows, thinner and fainter towards the back.

Prompt

Fly the paper plane along this curve as a motion path in 4 s, turning it to face the direction of travel.