[Feature]: implement support for motion groups & sequences

[layershifter]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

To implement more complex motions like below:

gantt
    title Balloon movement motion
    dateFormat  YYYY
    axisFormat %Yms
    section Group 1
    opacity, 0 => 1 (1000ms) : 0000, 1000y
    transformX, 0 => 100px (500ms) : :a1, 0000, 500y
    section Group 2
    transformX, 100px => 200px (500ms) : :a1, 1001, 500y
    transformY, 0 => 200px (1000ms) : :a1, 1001, 1000y
    section Group 3
    opacity, 1 => 0 (500ms) : :a1, 2000, 500y

Loading

We need to get API support for that as current factories (createAtom(), createPresence()) support only a single keyframe definition. For context, check the discussion: #29958 (comment)

Have you discussed this feature with our team

@microsoft/teams-prg @marcosmoura

Additional context

Prototype is available in #30531.

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

High

[layershifter]

Support for grouped (multiple motions) have been implemented in #31487.

[miroslavstastny]

Groups supported.
Delay can be used as a workaround for sequences.
Putting this issue on hold for couple of months to gather feedback.

[microsoft-github-policy-service]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes.
Still require assistance? Please add comment - "keep open".

[microsoft-github-policy-service]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes.
Still require assistance? Please add comment - "keep open".