Modules Motion Path
Motion Path
Send any module along a path as the visitor scrolls: a wave, a curve you plot with a few points, path data from your design tool, or an SVG from the media library. It can turn with the path, and the path itself can be shown and drawn as it goes.
↓ Scroll slowly: each module travels its path while its box is on screen, and goes back when you scroll up.
Live demo · Pro · Preset path
A wave, turning as it goes
Choose a preset (wave, S-curve, arc, loop, zigzag, diagonal or circle). Turn with the path keeps the dart pointing where it is heading, and Trace draws the path behind it.
preset: wave · turn with the path · trace
Live demo · Pro · Your own points
Plot it with a few points
No design tool needed: type points as x,y percentages of the area, from 0,0 at the top left to 100,100 at the bottom right. Kinetic draws a smooth curve through them, or straight lines.
10,80 30,20 50,70 70,25 90,60
Live demo · Pro · Path data
Path data from Figma or Illustrator
Paste the d of an SVG path and its viewBox. Keep proportions fits the shape without stretching it, so this figure eight stays a figure eight on any screen.
M100,300 C100,80 400,80 500,300 C600,520 900,520 900,300 …
Live demo · Pro · SVG file
An SVG from the media library
Pick an SVG file and the first path in it is used. This one runs end to start, from the top right down to the bottom left, tracing as it goes.
km-motion-ridge.svg · end to start · trace
How to use it
Where to find it
- Open any module → Kinetic tab → Motion Path and switch it on.
- Path: a preset, your own points, path data with its viewBox, or an SVG file. Points and path data are the way to draw your own path; there is no drawing tool in the builder.
- Move within the row or the column, stretched to fill it or keeping its proportions. The module stays inside unless you say otherwise.
- Turn with the path, with an angle offset for artwork that does not point right, and direction: start to end or end to start. Use part of the path only with start and end percentages.
- Timing: when the row top reaches one point of the screen to when its bottom reaches another, with optional smoothing.
- Show the path as a guide or trace it as the module moves; colour, width, dashed or solid.
In the builder the path is shown as a guide and the module stays in place so it is easy to edit. Visitors who prefer reduced motion see the module at the end of its path.
Works with
- Any module: photos, icons, buttons, headings
- Row or column as the area
- Per device: all, desktop, tablet or mobile
- Clip to the area so nothing spills
Good to know
- Pro extension, one switch in Settings
- Transform only: no layout shift, GPU friendly
- Recalculates on resize and when images load
- SVG files are read safely on the server
Kinetic Modules
Make your Beaver Builder sites move.
Start with the free plugin. Add Pro when a project needs the big effects.