easing in svg animate doesn't work

Question

I tried to add keySplines, values, keyTimes attributes to animate element to simulate easing animation. Easing effect doesn't work.

jsfiddle

HTML

<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
   <path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
      <animate class="triangle-animation" attributeType="XML" attributeName="d" from="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z" to="M765,22L765,15L505.00002429484215,15L490.00002429484215,0L475.00002429484215,15L0.5,15L0.5,21.5" dur="4s" repeatCount="1" fill="freeze" keySplines=" 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" calcMode="spline" begin="indefinite"></animate>
   </path>
</svg>

<button id="btn">Click me</button>

JS

document.getElementById("btn").onclick = function(e) {
    console.log('anim');
  document.querySelector('.triangle-animation').beginElement();
}

ccprog · Accepted Answer · 2018-02-28T20:36:47.470

If you use keyTimes, you either must provide a values list with a matching number of semicolon-separated entries, or if you use from and to, keyTimes must be "0;1" and keySplines must contain only one entry.
The path definitions in the values list must structurally match, with only numbers differing. If one has a closing Z command, every value needs one. Exception: Optional command letters (for repetitions of the same command) can be used or left out.
Bonus: your example doesn't need javascript to start with a button click. Just set begin="btn.click".

<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
   <path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
      <animate class="triangle-animation" attributeType="XML" attributeName="d" values="
        M765 22 765 15 L39 15 L25 0  L11 15  L0.5 15 L0.5 21.5 Z;
        M765 22 765 15 239 15 225 0  211 15  L0.5 15 L0.5 21.5 Z;
        M765 22 765 15 505 15 L490 0 L475 15 L0.5 15 L0.5 21.5 Z"
        keySplines="0.1 0.8 0.2 1;0.1 0.8 0.2 1"
        keyTimes="0;0.5;1"
        dur="4s" repeatCount="1" fill="freeze" calcMode="spline" begin="btn.click"></animate>
   </path>
</svg>

<button id="btn">Click me</button>

In my jsfiddle I am missing `Z` in `to` attribute. You don't need to use `values`, it works with `from` and `to`. Thank you — Matt, Feb 28 '18 at 20:13

score 1 · Answer 2 · answered Feb 28 '18 at 20:14

1

I was missing Z in to attribute. Working jsfiddle.

answered Feb 28 '18 at 20:14

Matt

8,195
31
115
225

1

It's not working with Firefox, and in Chrome it seems to simply ignore all keyTimes and to use only the first keySplines entry. That, in my opinion is in violation of the [spec](https://www.w3.org/TR/SVG11/animate.html#KeyTimesAttribute): "For from/to/by animations, the ‘keyTimes’ attribute if specified must have two values." – ccprog Feb 28 '18 at 20:31

easing in svg animate doesn't work

2 Answers2