Easy Ease

[Davidmarcell]

I can't figure out a way to easy ease the animations as you would traditional with css, is it possible to implement at all?

[maxwellito]

I guess you'e asking something like the easing option from Walkway

At the moment the library cannot make this kind of effect, but this is something which can be implemented. I'll try to find a way to add this feature without make the code heavier.

[Davidmarcell]

Cheers!
On 25/11/2014, at 11:09 pm, maxwellito notifications@github.com wrote:

I guess you'e asking something like the easing option from Walkway

At the moment the library cannot make this kind of effect, but this is something which can be implemented. I'll try to find a way to add this feature without make the code heavier.

—
Reply to this email directly or view it on GitHub.

[maxwellito]

Here we are!
I've added two new properties on the option object: animTimingFunction and pathTimingFunction. Both are taking a function as value, one is for the global (timeline) animation, the other is for the path (each line) animation.

The function will define the animation, it must accept a number as parameter (between 0 and 1) and return a number (between 0 and 1).

To help, I've set 2 homemade functions Vivus.TIMING_EASE_IN and Vivus.TIMING_EASE_OUT. The effect is not perfect, but does the job. They can be directly used in the option object.

new Vivus('my-svg-id', {
  type: 'delayed',
  duration: 200,
  animTimingFunction: Vivus.TIMING_EASE_OUT
});

The code is available on the dev branch. Can you please try it and tell me what you think?
Thanks

[MattiSG]

Can you please try it and tell me what you think?

Without having looked at the code, I can say that the naming is not very clear. What about easing: Vivus.EASE_OUT rather than animTimingFunction: Vivus.TIMING_EASE_OUT?

[maxwellito]

I understand, but I thought EASE_OUT would be too 'blurry'. By using the term 'timing', it refer to timing function used in CSS transitions. And about using easing as option property sounds false to me because the animation could be linear, step-start.. or custom. I have to investigate, but I'm happy you mention it, I wasn't happy with the naming.

We have to be careful about that point because it's not something we can change later.

[MattiSG]

Either we want to look like CSS and should use animationTimingFunction, or we want to be more specific and use ease.

For the value itself, being akin to CSS would mean naming it EASE_OUT.

I think I'd prefer ease: Vivus.ease.OUT, since the rest of the API does not mimick CSS.

[maxwellito]

This feature is now implemented in the last release.