Re: Animating SVG attributes from Web Animations

On Tue, Jun 16, 2015 at 10:09 PM Dirk Schulze <dschulze@adobe.com> wrote:

>  On Jun 16, 2015, at 1:45 PM, Shane Stephens <shans@google.com> wrote:
>
>
>
>  On Tue, Jun 16, 2015 at 9:24 PM Dirk Schulze <dschulze@adobe.com> wrote:
>
>>   On Jun 16, 2015, at 9:35 AM, Shane Stephens <shans@google.com> wrote:
>>
>>
>>
>>  On Tue, Jun 16, 2015 at 4:46 PM Dirk Schulze <dschulze@adobe.com> wrote:
>>
>>>   On Jun 16, 2015, at 7:16 AM, Shane Stephens <shans@google.com> wrote:
>>>
>>>   Shall WebAnimation also animate HTML attributes at some point?
>>>
>>>
>>>  I don't know. We've talked in the past about animating class. I'd also
>>> like to be able to animate scroll offsets at some point.
>>>
>>>
>>>> If yes, shall these attributes be “html” prefixed as well?
>>>
>>>
>>>  Yes. I think that would make sense.
>>>
>>>
>>>> What happens with the “svg*” attribute animation once we promoted the
>>>> attribute to a CSS property/ presentation attribute?
>>>>
>>>
>>>  * If the promotion matches the syntax and name, then animating either
>>> svgFoo or foo will produce identical results.
>>> * If the promition matches the syntax, but the name foo becomes bar when
>>> promoted, then animating svgFoo and animating bar will produce identical
>>> results.
>>> etc..
>>>
>>>
>>>    What about the CSS properties width/height and the width/height
>>> attributes on an HTMLCanvasElement? Both can be applied at the same time
>>> and may have different meanings. I assume that this would justify the html*
>>> prefix but we would end up with a svgWidth and htmlWidth animation
>>> attribute.
>>>
>>
>>  Yes, these would also be properties that we would want to provide with
>> an html prefix, if we choose to make them animatable. I'm not aware of any
>> plans to do so right now though.
>>
>>
>>>  Is there maybe a way to explicitly state that you want to animate a
>>> property or an attribute? In case of a presentation attribute it would
>>> always fallback to the property? Similar to “attributeType”[1] in SVG
>>> animations?
>>>
>>
>>  svg/html as a prefix is an example of an explicit way :) Happy to
>> consider others too. Do you have some ideas?
>>
>>
>>   What about another animation parameter?
>>
>>
>>  Note that it's probably a bad idea to restrict a single animation to
>> only property animation or only attribute animation, because future
>> promotion of attributes might then lead to the need for a large-scale
>> refactor.
>>
>>
>>    IMO the current experience with the latest presentation properties
>> lead to a different conclusion. Still supporting attribute animations
>> separate from property animations on a presentation attribute is quite a
>> challenge and we agreed to not require this anymore.
>>
>
>  Can you provide more context? e.g. who's 'we' and which animations are
> you talking about? What were the challenges?
>
>  I can't think of any particular difficulties that would prevent us
> supporting both property and attribute references within a single keyframe,
> but maybe I'm thinking wrong.
>
>
>  With attributeType, it was possible (according to SVG 1.1) to specify a
> animation on the attribute value of the presentation attribute. Meaning
> that you animated a value that comes after US stylesheet in the CSS
> cascade. Or you animated the CSS property which animated the value after
> the whole cascade. You were able to animate the attribute and the property
> at the same time, causing changes in different levels of the cascade. This
> was implementable but fairly complex. We agreed to get rid of this behavior
> and animate the property even though attributeType=“XML” was specified.
> With “we” I am basically speaking of WebKit, Blink, Gecko and the SVG WG.
>

Thanks, that context helps a lot, and suggests that we can adopt a similar
strategy for Web Animations: that is, if an presentation attribute is
selected for animation using svgFoo, then simply drop back to animating foo
instead. I recommended this approach in my initial email, though for
different reasons.

I'm not sure why this would prevent us from wanting to mix, e.g.
non-presentation attributes and css properties in a single animation. For
example -
element.animate({transform: 'translate(100px)', svgD:
'l100,0l-50,-100l-50,100'}, 1000);

Cheers,
    -Shane


>  Greetings,
> Dirk
>
>
>  Cheers,
>     -Shane
>
>
>>
>>  Greetings,
>> Dirk
>>
>>
>>  Cheers,
>>     -Shane
>>
>>
>>>  Greetings,
>>> Dirk
>>>
>>>  [1] http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute
>>>
>>>
>>>  Cheers,
>>>     -Shane
>>>
>>>
>>>> Dirk
>>>>
>>>> >
>>>> > Cheers,
>>>> >     -Shane
>>>>
>>>>