I'm using the Element.animate() method to animate a side panel sliding into the page when it's opened. At closing time, the animation is reversed and then plays backwards. If the easing function is asymmetric the effect looks strange because the animation plain plays backwards, including each easing step. Using "ease-out" will start opening the panel quickly and slow down towards the end. But in reverse mode, it will start slowly and end quickly. This is not like simple CSS transitions IIRC, they apply the easing forwards in any direction.

I'd rather want all animations to start more quickly than they end, no matter the visual direction or their underlying implementation. Any animation should react swiftly and then ease out towards its final state.

Unfortunately I couldn't find a way to also reverse the easing function when reversing the animation. Is that even possible?

Here's some code:

// Open the panel
let keyframes = [{ left: "-200px" }, { left: "0" }];
let options = {
    duration: 1000,   // extra slow to see the difference
    easing: "ease-out",
    fill: "forwards"
};
let animation = panel.animate(keyframes, options);

// Close the panel
animation.reverse();
// Also want to reverse the easing here, but how?

I'm using the reverse() method because the closing may also start while the opening is still ongoing (and vice versa). If somebody pushes the menu button quickly (or another app event occurs), then the new animation must begin immediately, without first cancelling the current one and resetting (jumping) the panel position to either end state. All changes in direction must be seamless (like in real world physics where things usually cannot suddenly jump, too).