From 34a93b520e96bef83e316bee5ca1e8d798e2c1bf Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Fri, 21 Apr 2023 14:17:24 -0700 Subject: [PATCH 1/5] add pulse using scale --- .../SkeletonItem/useSkeletonItemStyles.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts index 0476bc5c510a85..96ce05dce3051e 100644 --- a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts +++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts @@ -27,11 +27,16 @@ const skeletonWaveAnimation = { }; const skeletonPulseAnimation = { - from: { - opacity: '1', + '0%': { + transform: 'scale(0.98, 0.98)', }, - to: { - opacity: '0.4', + + '50%': { + transform: 'scale(1, 1)', + }, + + '100%': { + transform: 'scale(0.98, 0.98)', }, }; From 0da3be89a2d78e943505d6cde144ae78c05f9385 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Fri, 21 Apr 2023 14:19:20 -0700 Subject: [PATCH 2/5] change file --- ...eact-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json diff --git a/change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json b/change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json new file mode 100644 index 00000000000000..2fa2133028805d --- /dev/null +++ b/change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add pulse animation using scale attribute", + "packageName": "@fluentui/react-skeleton", + "email": "ololubek@microsoft.com", + "dependentChangeType": "patch" +} From ebc407c64c65f59add35279e001e9b1324765c78 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Wed, 3 May 2023 17:45:38 -0700 Subject: [PATCH 3/5] update pulse animation --- .../SkeletonItem/useSkeletonItemStyles.ts | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts index 96ce05dce3051e..033fffed73037e 100644 --- a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts +++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.ts @@ -8,7 +8,7 @@ export const skeletonItemClassNames: SlotClassNames = { root: 'fui-SkeletonItem', }; -const skeletonWaveAnimationRTL = { +const skeletonWaveAnimation = { from: { backgroundPositionX: '300% /* @noflip */', }, @@ -17,7 +17,7 @@ const skeletonWaveAnimationRTL = { }, }; -const skeletonWaveAnimation = { +const skeletonWaveAnimationRTL = { from: { backgroundPositionX: '0% /* @noflip */', }, @@ -28,15 +28,19 @@ const skeletonWaveAnimation = { const skeletonPulseAnimation = { '0%': { - transform: 'scale(0.98, 0.98)', + opacity: '0.5', + }, + '20%': { + opacity: '0.6', }, - '50%': { - transform: 'scale(1, 1)', + opacity: '0.7', + }, + '70%': { + opacity: '0.8', }, - '100%': { - transform: 'scale(0.98, 0.98)', + opacity: '1', }, }; @@ -68,9 +72,18 @@ const useStyles = makeStyles({ }, waveRtl: { animationName: skeletonWaveAnimationRTL, + backgroundImage: `linear-gradient( + to right, + ${tokens.colorNeutralStencil1} 0%, + ${tokens.colorNeutralStencil2} 50%, + ${tokens.colorNeutralStencil1} 100%)`, + '@media screen and (forced-colors: active)': { + backgroundColor: 'WindowText', + }, }, pulse: { animationName: skeletonPulseAnimation, + animationDuration: '2s', backgroundColor: tokens.colorNeutralStencil1, }, translucent: { From b17bba543c947647262d4bcc4429167747334084 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Thu, 4 May 2023 12:01:44 -0700 Subject: [PATCH 4/5] update pulse animation --- .../SkeletonItem/useSkeletonItemStyles.styles.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts index 033fffed73037e..e20e9009204cae 100644 --- a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts +++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItemStyles.styles.ts @@ -28,16 +28,10 @@ const skeletonWaveAnimationRTL = { const skeletonPulseAnimation = { '0%': { - opacity: '0.5', - }, - '20%': { - opacity: '0.6', + opacity: '1', }, '50%': { - opacity: '0.7', - }, - '70%': { - opacity: '0.8', + opacity: '0.4', }, '100%': { opacity: '1', @@ -83,7 +77,7 @@ const useStyles = makeStyles({ }, pulse: { animationName: skeletonPulseAnimation, - animationDuration: '2s', + animationDuration: '1s', backgroundColor: tokens.colorNeutralStencil1, }, translucent: { From d8c377de1d1bb8d395fac3fcdac5c31fef49acff Mon Sep 17 00:00:00 2001 From: Tomi Olubeko <66456876+tomi-msft@users.noreply.github.com> Date: Thu, 4 May 2023 15:17:18 -0700 Subject: [PATCH 5/5] Update change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json Co-authored-by: Esteban Munoz Facusse --- ...tui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json b/change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json index 2fa2133028805d..815eb720b99cba 100644 --- a/change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json +++ b/change/@fluentui-react-skeleton-9e800ca2-9155-4112-9add-68393df30fe7.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "Add pulse animation using scale attribute", + "comment": "fix: Scale pulse animation with percentages and flip wave animation's direction.", "packageName": "@fluentui/react-skeleton", "email": "ololubek@microsoft.com", "dependentChangeType": "patch"