Open Bug 1186329 (motion-1) Opened 9 years ago Updated 3 months ago

[META] Implement Motion Path Module Level 1


(Core :: Layout, enhancement, P3)





(Reporter: yiorsi, Unassigned)


(Depends on 17 open bugs, Blocks 2 open bugs, )


(Keywords: dev-doc-needed, DevAdvocacy, meta, Whiteboard: [DevRel:P2])


(1 file)

The editors' draft specification is available at

Motion paths allow authors to animate elements along an author-specified path.

Motion path animation provides an easy way for authors to declaratively specify animation of an element along a sequence of lines, arcs or splines. This is a CSS equivalent to the animateMotion tag, but for all HTML and SVG elements. (animateMotion only works with SVG elements, and only in browsers that support SMIL.)

The following CSS properties are implemented and proposed for shipping:
motion-path: none | path(<string>)
motion-offset: <length> | <percentage>
motion-rotation: [ auto | reverse ] && <angle>
motion: <motion-path> && <motion-offset> && <motion-rotation>

When the motion-offset property is animated, for example using Web Animations, the element moves along the path.

When motion-rotation is 'auto' (the default), the element automatically rotates as it follows the path.

The following motion-path options from the spec are not implemented or proposing for shipping at this time:  <url> , <basic-shape> , <geometry-box> , path <fill-rule>
Severity: normal → enhancement
Component: Untriaged → CSS Parsing and Computation
OS: Unspecified → All
Product: Firefox → Core
Hardware: Unspecified → All
Version: 42 Branch → Trunk
@Astley Chen Are you going to support this feature?
(In reply to percyley from comment #2)
> @Astley Chen Are you going to support this feature?

It's under consideration now, would you like to share your thoughts against the spec stability and current support level of browsers ? Your feedback is welcome.
Attached image Chrome-test.png
Chrome 46+ and Opera 33+ support this, but not fully supported.

They only support motion-path: none|path(). See

I think the next CSS specification will have more SVG features, developers are also very much look forward to these characteristics, such as the recent mozilla implementation of the background-clip: text.
There were significant changes to this specification agreed at the CSS working group's face-to-face meeting last week, to merge this specification with the polar positioning feature in CSS round display.  We should wait until those changes shake out before working on an implementation here.
Ever confirmed: true
The specification has now been greatly changed:

motion-offset -> offset-distance
motion-path -> offset-path
motion-rotation -> offset-rotation
motion -> offset



offset-path(motion-path) add <angle> and <size>

Chrome has fully implemented the new specification:!msg/blink-dev/o1C5NzGf9Q0/sbaLF1MbAgAJ
Priority: -- → P3
Keywords: DevAdvocacy
Whiteboard: [DevRel:P2]
(In reply to percyley from comment #8)
> Chrome has fully implemented the new specification:
> sbaLF1MbAgAJ

As far as I can see, Chrome doesn't support the 'offset' shorthand as defined in the spec. yet.

Summary: Support CSS motion path animation → [META] Implement Motion Path Module Level 1
Component: CSS Parsing and Computation → Layout
Alias: motion-1
I'm working on this recently, and will file some bugs later. All my plans and ideas are in [1]. According to [1], I'd like to implement the following properties:
1. offset-path: path()
2. offset-distance
3. offset-rotate
Just as Chrome did at first. Also, we have to make offset-distance and offset-rotate animatable, so the basic target of motion-path could be achieved. After that, we could keep working on other values of offset-path (e.g. ray(), basic-shapes), and support offset-position and offset-anchor.

Depends on: 1429298
Depends on: 1429299
Depends on: 1429301
Depends on: 1429303
Depends on: 1429305
Depends on: 1480649
Depends on: 1480665
Depends on: 1484780
Depends on: 1485433
Depends on: 1486094
Depends on: 1489392
Depends on: 1491954
Depends on: 1559231
Depends on: 1559232
Depends on: 1567330
Depends on: 1568370
Depends on: 1569795
Depends on: 1579294
Depends on: 1581237
Depends on: 1582554
Depends on: 1590542
Depends on: 1591629
Depends on: 1593106
Depends on: 1598120
Depends on: 1598151
Depends on: 1598152
Depends on: 1598156
Depends on: 1598158
Depends on: 1598159
Depends on: 1601486
Depends on: 1565147
Severity: normal → S3
Depends on: 1820070
Depends on: 1820071
Depends on: 1821450
Depends on: 1821455
Depends on: 1786160
Depends on: 1786161
Depends on: 1832729
Depends on: 1835165
Depends on: 1836831
Depends on: 1836847
Depends on: 1837042
Depends on: 1837305
Depends on: 1838134
Depends on: 1838977
Depends on: 1840430
Depends on: 1840438
See Also: → 1840819
No longer depends on: 1841284
Depends on: 1845390
Depends on: 1846817
Depends on: 1847620
Depends on: 1847621
Depends on: 1855756
Depends on: 1860177
Depends on: 1861999
Depends on: 1868496
Depends on: 1868719
Depends on: 1887738
Depends on: 1881151
Depends on: 1888279
No longer depends on: 1888279
You need to log in before you can comment on or make changes to this bug.