diff --git a/change/@fluentui-react-motions-preview-f7e0f94c-24bd-4fa0-bae2-886019aac40f.json b/change/@fluentui-react-motions-preview-f7e0f94c-24bd-4fa0-bae2-886019aac40f.json
new file mode 100644
index 00000000000000..3703c6c08e5e85
--- /dev/null
+++ b/change/@fluentui-react-motions-preview-f7e0f94c-24bd-4fa0-bae2-886019aac40f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "breaking: AtomMotionFn & PresenceMotionFn have an object as param",
+  "packageName": "@fluentui/react-motions-preview",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md b/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md
index e15e01681b0543..45a3e561394d14 100644
--- a/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md
+++ b/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md
@@ -12,7 +12,9 @@ export type AtomMotion = {
 } & KeyframeEffectOptions;
 
 // @public (undocumented)
-export type AtomMotionFn = (element: HTMLElement) => AtomMotion;
+export type AtomMotionFn = (params: {
+    element: HTMLElement;
+}) => AtomMotion;
 
 // @public
 export function createMotionComponent(motion: AtomMotion | AtomMotionFn): React_2.FC<MotionComponentProps>;
@@ -95,7 +97,9 @@ export type PresenceMotion = {
 };
 
 // @public (undocumented)
-export type PresenceMotionFn = (element: HTMLElement) => PresenceMotion;
+export type PresenceMotionFn = (params: {
+    element: HTMLElement;
+}) => PresenceMotion;
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/react-components/react-motions-preview/src/factories/createMotionComponent.test.tsx b/packages/react-components/react-motions-preview/src/factories/createMotionComponent.test.tsx
index c905571e69dac2..a2afeebee53fe1 100644
--- a/packages/react-components/react-motions-preview/src/factories/createMotionComponent.test.tsx
+++ b/packages/react-components/react-motions-preview/src/factories/createMotionComponent.test.tsx
@@ -59,7 +59,7 @@ describe('createMotionComponent', () => {
     );
 
     expect(fnMotion).toHaveBeenCalledTimes(1);
-    expect(fnMotion).toHaveBeenCalledWith({ animate: animateMock } /* mock of html element */);
+    expect(fnMotion).toHaveBeenCalledWith({ element: { animate: animateMock } /* mock of html element */ });
 
     expect(animateMock).toHaveBeenCalledTimes(1);
   });
diff --git a/packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts b/packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts
index 4eeafb7eb722d8..95479b37325bb5 100644
--- a/packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts
+++ b/packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts
@@ -34,7 +34,7 @@ export function createMotionComponent(motion: AtomMotion | AtomMotionFn) {
       const element = elementRef.current;
 
       if (element) {
-        const definition = typeof motion === 'function' ? motion(element) : motion;
+        const definition = typeof motion === 'function' ? motion({ element }) : motion;
         const { keyframes, ...options } = definition;
 
         const animation = animate(element, keyframes, {
diff --git a/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.test.tsx b/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.test.tsx
index 55b342c6e3a631..5a50abece10bcb 100644
--- a/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.test.tsx
+++ b/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.test.tsx
@@ -236,7 +236,7 @@ describe('createPresenceComponent', () => {
       );
 
       expect(fnMotion).toHaveBeenCalledTimes(1);
-      expect(fnMotion).toHaveBeenCalledWith({ animate: animateMock } /* mock of html element */);
+      expect(fnMotion).toHaveBeenCalledWith({ element: { animate: animateMock } /* mock of html element */ });
 
       expect(animateMock).toHaveBeenCalledWith(exitKeyframes, options);
     });
diff --git a/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.ts b/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.ts
index ce23fa2a939871..5bfb25a1aa4aea 100644
--- a/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.ts
+++ b/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.ts
@@ -83,7 +83,7 @@ export function createPresenceComponent(motion: PresenceMotion | PresenceMotionF
           return;
         }
 
-        const presenceDefinition = typeof motion === 'function' ? motion(elementRef.current) : motion;
+        const presenceDefinition = typeof motion === 'function' ? motion({ element: elementRef.current }) : motion;
         const { keyframes, ...options } = visible ? presenceDefinition.enter : presenceDefinition.exit;
 
         const animation = animate(elementRef.current, keyframes, {
diff --git a/packages/react-components/react-motions-preview/src/types.ts b/packages/react-components/react-motions-preview/src/types.ts
index d3cf672be3cb1d..415f57c83f0a5d 100644
--- a/packages/react-components/react-motions-preview/src/types.ts
+++ b/packages/react-components/react-motions-preview/src/types.ts
@@ -5,8 +5,8 @@ export type PresenceMotion = {
   exit: AtomMotion;
 };
 
-export type AtomMotionFn = (element: HTMLElement) => AtomMotion;
-export type PresenceMotionFn = (element: HTMLElement) => PresenceMotion;
+export type AtomMotionFn = (params: { element: HTMLElement }) => AtomMotion;
+export type PresenceMotionFn = (params: { element: HTMLElement }) => PresenceMotion;
 
 export type MotionImperativeRef = {
   /** Sets the playback rate of the animation, where 1 is normal speed. */
diff --git a/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.md b/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.md
index 9fd8e31336c51b..55c3da5ede4a2b 100644
--- a/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.md
+++ b/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.md
@@ -1,7 +1,7 @@
-Atoms and presence definitions can be also defined as functions that accept an animated element as an argument. This allows to define more complex animations that depend on the animated element's properties, for example:
+Atoms and presence definitions can be also defined as functions that have `params` as argument (includes an animated element). This allows to define more complex animations that depend on the animated element's properties, for example:
 
 ```ts
-const Grow = createMotionComponent(element => ({
+const Grow = createMotionComponent(({ element }) => ({
   duration: 300,
   keyframes: [
     { opacity: 0, maxHeight: `${element.scrollHeight / 2}px` },
diff --git a/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx b/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx
index a7ac824ec7a89e..048bdfe6cdee10 100644
--- a/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx
+++ b/packages/react-components/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx
@@ -41,7 +41,7 @@ const useClasses = makeStyles({
   description: { margin: '5px' },
 });
 
-const collapseMotion: PresenceMotionFn = element => {
+const collapseMotion: PresenceMotionFn = ({ element }) => {
   const duration = 500;
   const keyframes = [
     { opacity: 0, maxHeight: '0px', overflow: 'hidden' },