ericwilligers / svg-animation

Implement SVG animation in JavaScript using Web Animations
Apache License 2.0
120 stars 20 forks source link

Paced timing using additional keyframes. #31

Open ewilligers opened 10 years ago

ewilligers commented 10 years ago

When animating between 5 values using calcMode="discrete", each value should be used for 1/5 of the animation duration.

This can be achieved by passing 10 keyframes with explicit offsets to Web Animations.

We were previously using 5 keyframes without offsets, and using easing: 'steps(4, end)'

This did not achieve accurate timing.