Skip to main content

Motion Path — Playground

🚀
looping — pick a shape on the right
▶ Looping every 4s — travels the path forever.
Wave — options
Sample option — updates as you tweak
'motion_path' => [
    'mode'  => 'wave',
    'wave' => [
            'drive' => 'loop',
            'duration' => 4,
            'path_size' => 300,
            'start_offset' => 0,
            'direction' => 'no',
            'align' => 'no',
            'easing' => 'ease-in-out',
    ],
],

Motion Path is a per-element control on the Animations tab. Each shape is an SVG path in a 0–100 box; the element travels it relative to its own layout position. Here the badge shows the path drawn faintly — on a real page only the element moves.

Pick a shape on the right, choose how it's driven — Scroll (scrubbed), Loop, or On view — then tweak Path size, Start offset, Duration / Easing, Reverse, and Align to path. This runs the real module: the same normalized 0–100 SVG paths, the same getPointAtLength sampling, and the verbatim apply() transform math. The path is drawn faintly so you can see the route — on a live page only the element moves, relative to its own layout position. The Sample option updates as you tweak.

Where it lives

Motion Path is a per-element control — open any element (Section, Column, heading, image, icon box…) → Animations tab → Motion Path. Pure SVG geometry and one runtime, loaded only on pages that use it; it honours reduced motion (the element stays at its layout position).

← Back to Motion Path