Re: Proposal: Motions along a path in CSS

On 2014/08/28 17:59, Dirk Schulze wrote:
> 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).

I like this idea and agree with Shane that if we have these properties, 
we can probably remove the need for MotionPathEffect from Web Animations.

We'll need a suitable procedure for calculating "distance"[1] between 
motion-position values so we can do paced timing but apart from that I 
think we can cover most of MotionPathEffect using this.

(One thing this doesn't give you, which Web Animations' MotionPathEffect 
and SVG's <animateMotion> do, is the ability to time based on 
path-segment. For example, if you have an isosceles triangle, in Web 
Animations and SVG you can set up an animation that takes an equal 
amount of time to traverse each segment without having to calculate the 
segment lengths. We could possibly address this in future with a 'seg' 
length unit, as proposed elsewhere[2], and define pacing to work in 
terms of segments when these units are used. This needs more thought.)

One area of concern is ideally I'd like SVG's <animateMotion> and 
animations based on motion-* properties to have more-or-less the same 
underlying representation.

That would mean redefining SVG's <animateMotion>, probably in terms of 
'motion()' transform operations. That would likely create an observable 
difference for applications inspecting the animated / computed transform 
value of elements animated with <animateMotion> but hopefully there 
aren't too many of them.

All in all, looks good.

Brian

[1] 
http://dev.w3.org/fxtf/web-animations/#procedures-for-animating-properties
[2] https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke

Received on Thursday, 4 September 2014 04:42:20 UTC