Core Concept
offset-path = places any element along a curved path (like a train on tracks) offset-distance = controls position along the path (0% = start, 100% = end)
Basic Syntax
.element {
offset-path: path("M0 0 Q100 50 200 0");
offset-distance: 0%;
transition: offset-distance 1s;
}
.element.active {
offset-distance: 100%;
}
Key Properties
offset-path
Defines the path using SVG path syntax
offset-path: path("M50 50 Q150 0 250 50");
offset-path: path("M0 0 L100 0 L100 100 L0 100 Z");
offset-distance
Position along the path (percentage)
offset-distance: 0%;
offset-distance: 50%;
offset-distance: 100%;
offset-anchor
Which part of element touches the path
offset-anchor: center;
offset-anchor: top left;
offset-anchor: 10px 10px;
offset-rotate
How element rotates along path
offset-rotate: auto;
offset-rotate: 0deg;
offset-rotate: 90deg;
Element Type Differences
SVG Elements
rect {
offset-path: path("M20 20 Q80 20 80 80");
offset-anchor: 0 0;
}
Coordinates: SVG viewBox units
Default anchor: Top-left corner (0,0)
Path origin: SVG coordinate system
.button {
offset-path: path("M0 0 Q150 0 300 200");
offset-anchor: center;
}
Coordinates: Pixels relative to element's current position
Default anchor: Center of element
Path origin: Element's top-left corner
Common Patterns
Basic Curved Animation
.element {
offset-path: path("M0 0 Q100 -50 200 0");
offset-distance: 0%;
transition: offset-distance 2s ease;
}
.element:hover {
offset-distance: 100%;
}
Circular/Loop Movement
.element {
offset-path: path("M100 50 A50 50 0 1 1 100 51");
offset-distance: 0%;
animation: loop 3s infinite linear;
}
@keyframes loop {
to {
offset-distance: 100%;
}
}
Complex Multi-segment Path
.element {
offset-path: path("M50 100 Q150 50 250 100 Q350 150 450 100");
offset-distance: 0%;
}
Practical Examples
.button {
offset-path: path("M0 0 Q50 -30 100 0");
offset-distance: 0%;
transition: offset-distance 0.3s ease;
}
.button:active {
offset-distance: 100%;
}
Loading Spinner
.spinner {
offset-path: path("M50 25 A25 25 0 1 1 50 26");
animation: spin 1s infinite linear;
}
@keyframes spin {
to {
offset-distance: 100%;
}
}
CD/Disc Animation
.cd-wrapper {
offset-path: path("M32 32C96.5 -25.5 132.865 26.0836 140 192");
offset-distance: 0%;
transition: all 0.5s;
}
.cd-wrapper[aria-pressed="true"] {
offset-distance: 100%;
width: 192px;
height: 192px;
}
Common Path Commands
path('M0 0 L100 100')
path('M0 0 Q50 -50 100 0')
path('M0 0 C25 -25 75 -25 100 0')
path('M0 0 A50 50 0 0 1 100 0')
path('M50 0 Q100 25 50 50 Q0 25 50 0')
Gotchas & Tips
Coordinate System Confusion
circle {
offset-path: path("M20 20 Q80 20 80 80");
}
.div {
offset-path: path("M0 0 Q60 0 120 60");
}
Anchor Point Issues
.element {
offset-anchor: center;
}
Path Direction Matters
path('M0 0 L100 0')
path('M100 0 L0 0')
.element {
transition: offset-distance 1s;
}
