Keyframes - Animation override for transform values

[bhamlefty]

Feature Request

I would like to be able to declare an animation and override the duration, delay, and keyframes when needed. This is particularly valuable in the case of transform animations. I would like to create animation templates for basic slide animations (up, down, left & right). Since we have elements with different heights and widths that slide in and out of view it would be nice to be able to use one slide animation template but override the transform value as needed so we can account for different sizes of elements.

Problem description

Imagine we have a sidebar with a width of 300px and another sidebar with a width 400px and we want to animate then in and out of view. Instead of creating different animations for each use case we could use one Slide_In_Left animation and override one of the transform keyframes to account for the difference in element sizes. See example below:

Sidebar 1 animation="Slide_In_Left" keyframe1="-300px" keyframe2="0px"
Sidebar 2 animation="Slide_In_Left" keyframe1="-400px" keyframe2="0px"

Proposed solution

With this solution we could have a few animation templates that uses our Teams branded animation curves but are also flexible enough to adapt to any need.