feat(motion): add Rotate presence motion component #34928

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Open

robertpenner wants to merge 23 commits into microsoft:master from robertpenner:feat/rotate

Collaborator

robertpenner commented Jul 28, 2025 •

edited

Loading

New Behavior

This PR adds a Rotate presence motion component in react-motion-components-preview.

<Rotate visible={visible}>Content</Rotate>

<Rotate visible={visible} axis="x" angle={45}>Content</Rotate>

<Rotate visible={visible} axis="y" angle={90} duration={1000}>Content</Rotate>

// plus parameters for easing, exitAngle, exitDuration and exitEasing

Testing

Unit tests
Examples in Storybook

robertpenner self-assigned this

robertpenner added the Package: motion label

github-actions bot commented Jul 28, 2025

Pull request demo site: URL

github-actions bot commented Jul 28, 2025 •

edited

Loading

📊 Bundle size report

✅ No changes found

robertpenner force-pushed the feat/rotate branch from 6cccbb0 to 5a8909f Compare

July 28, 2025 18:50

github-actions bot reviewed

View reviewed changes

change/@fluentui-react-motion-components-preview-32aac0a2-6998-44d1-a90e-ea35ad4f9e92.json Show resolved Hide resolved

robertpenner marked this pull request as ready for review

July 28, 2025 19:25

robertpenner requested a review from a team as a code owner

July 28, 2025 19:25

robertpenner requested a review from layershifter

July 28, 2025 19:51

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...act-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...eact-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...act-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...act-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...act-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx Outdated Show resolved Hide resolved

layershifter reviewed

View reviewed changes

...act-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx Outdated Show resolved Hide resolved

robertpenner force-pushed the feat/rotate branch from 646b730 to c53e74c Compare

July 29, 2025 11:53

robertpenner force-pushed the feat/rotate branch from c53e74c to 2a351d9 Compare

August 8, 2025 14:54

robertpenner requested a review from layershifter

August 8, 2025 16:32

robertpenner added 5 commits

August 10, 2025 12:43


          feat(Rotate): start implementing Rotate motion component

6cffffe


          feat(Rotate): enhance Rotate component with 3D axis control and add s…

c8153b4

…tories for common patterns


          feat(Rotate): implement rotateAtom for single-axis rotation and updat…

4fc8b7f

…e Rotate component to use new parameters


          feat(Rotate): refactor Rotate types

c86c9f9


          refactor(Rotate): rename enterAngle to angle

9a707b9

robertpenner added 18 commits

August 10, 2025 12:43


          feat(Rotate): update Rotate patterns with new parameters and easing f…

1519a42

…unctions


          chore(Rotate): yarn change

3f3c487


          chore(Rotate): update .api.md

c305a53


          feat(Rotate): update RotateCommonPatterns to include exit easing and …

eaf9301

…duration


          test(Rotate): add unit tests

97f4152


          feat(Rotate): rename story

74f7dc8


          feat(Rotate): adjust perspective settings and enhance card wrapper st…

90f3843

…yling


          docs(Rotate): remove extra shadow from cards

15939c4


          docs(Rotate): adjust card perspective spring easing

2b4e706


          feat(Rotate): enhance design token usage and improve accessibility in…

6c9998e

… stories


          docs(Rotate): improve layout of animation controls

9b7f4fa


          feat(Rotate): remove background shadows for improved 3D rotation effect

37ee76f


          docs(Rotate): update transition effects and toggle button text for im…

f201884

…proved interaction


          refactor(Rotate): reorganize type exports and improve import structur…

40663de

…e for clarity


          refactor(Rotate): remove autoplay functionality and associated contro…

0b82abd

…ls for cleaner interaction


          refactor(Rotate): replace Card with CompoundButton

6850bab


          refactor(Rotate): update slider label styles and introduce slider hea…

b390132

…der for improved layout


          chore(Rotate): update .api.md

29437b7

robertpenner force-pushed the feat/rotate branch from 14b6086 to 29437b7 Compare

August 10, 2025 16:43

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Package: motion