Proposal: Motions along a path in CSS

Hi,

Animating an element along a path is one of the missing parts of CSS animations today. The intention of this mail is to get a discussion started and get a general feeling if people are interested in this kind of feature.

Animations along a path is getting asked for for quite some time and supported in SVG with <animateMotion> (not in IE though).

## Currently there exist some libraries adding support for this kind of feature:

* YUI http://yuilibrary.com/yui/docs/anim/curve.html
* TweenJS http://www.createjs.com/Docs/TweenJS/classes/MotionGuidePlugin.html
* And a lot less common used libraries.

## Other technologies beside SVG supporting Animation along a path are:

* Adobe Flash,
* MS XAML
* and others

## The WebAnimations spec defines an JS interface to set up motion paths:

http://dev.w3.org/fxtf/web-animations/#motion-path-animation-effects

## Proposal

I would like to propose adding a declarative version for motion path that has a similar behavior as SVG’s <animateMotion> and would be based on the underlying technique of WebAnimations.

These are the properties and the proposed values:

motion-path: <basic-shape> | <url> | none

	* basic-shape will be extended by the path() function which takes an SVG Path string.
	* initial: none

motion-position: <length> | <percentage>

	* The current position on the specified path or shape. Basic shapes need to specify the initial position 0.
	* initial: 0

motion-rotation: auto | reverse | <angle>

	* ‘auto’ rotates the element dependent on the gradient at the current position on the path
	* ‘reverse’ does the same as ‘auto’ but rotated by 180deg.
	* <angle> a rotation applied to the element and keeps the rotation consistent along the animation.
	* initial: auto

motion: <motion-path> && <motion-position> && <motion-rotation>

	* The shorthand for the motion longhands above.

Motion animations are pre-multiplied to other transformations and apply before the ’transform’ property. Setting up the animation allows implementations to composite the element into the scene and push animations off the main thread into the compositing thread. Just like animated CSS Transforms.

## Example:

.box {
	motion-path: polygon(0px 100px, 100px 50px, 200px 100px);
	motion-rotation: auto;
	transition: motion-position 3s;
}
.box:hover {
	motion-position: 100%;
}

Elements with the class “box” will be positions to the initial position of the motion path. On hovering, the element will be transitioned along the motion path.

## Issues

There are some obvious topics that need to be discussed. Should the element behave as a fixed positioned element and override other properties? What about elements with different values for the display property and so on. These issues need to be discussed in the context of WebAnimations anyway.

Greetings,
Dirk

Received on Thursday, 28 August 2014 08:59:34 UTC