Translate along path animation

Overview

The translate-along-path built-in effect is used to animate an element by moving it along a predefined SVG path. This effect is commonly utilized in animations where you want an object to follow a curved or complex route rather than a straight line. The motion is determined by the geometry of the SVG path, allowing for precise and visually appealing transitions.

You can animate any DOM element using the translate-along-path(<path: {svg-path}>) alias. In this context, path: {svg-path} specifies the SVG path element along which the DOM element will move.

Note: In order to maintain the right behavior, always include the viewBox on the parent `svg element.

Syntax

Default

The default translate-along-path parameters:

Examples

These example show the translate-along-path built-in effect in action using the animate, hover, scroll and mouse triggers, but you can use any of the supported triggers.

Note: To simulate the movement of an element along its target path, wrap both the element and the svg (containing the path) inside a parent wrapper with position: relative. Then, apply position: absolute; top: 0; left: 0; to your element.

Animate

We have defined the animation options by the <duration: 4s, infinite, path: #example-path-02> that sets the duration to 4s and make sure that animation plays forever.

Hover

When you want to reveal a path on hover, it’s better to define the target element (usually the parent element) and apply the hover effect to it using the target parameter. We use hover(parent), where the parent refers to the nearest wrapper element.

Scroll

It is possible to create a translate along path animation on scroll using the scroll trigger.

Mouse

Similar to above, you can use a mouse or pointer trigger to create a revealing path animation.

Options

path (required)

The path option that points the target SVG <path> element is required. All other property options passed in the <> are optional.