PolymerElements/paper-header-panel

paper-header-panel tall mode animation has no time curve

Closed this issue · 2 comments

from Google Design Animation

Use curved motion and avoid linear spatial paths. Identify the qualities of motion best suited to your object, and represent their motion accordingly. Curves represent that change over time, for a particular value range. Find a curve that fits that character of motion you are describing.

This is not the case when the mode in the paper header panel animation goes from tall to standard and vice versa. The time curve is incorrectly linear.

There could be a custom property to customize the easing fn.

@dman777 I just noticed that the user can set the easing function directly. https://github.com/PolymerElements/paper-header-panel/blob/master/demo/index.html#L40 e.g.

transition-timing-function: ease-in-out;

Therefore, I'm closing this issue.