diff --git a/apps/common-app/src/apps/css/examples/animations/routeCards/AnimationSettingsCard.tsx b/apps/common-app/src/apps/css/examples/animations/routeCards/AnimationSettingsCard.tsx index 1e58d95d763d..46a1200cb6cd 100644 --- a/apps/common-app/src/apps/css/examples/animations/routeCards/AnimationSettingsCard.tsx +++ b/apps/common-app/src/apps/css/examples/animations/routeCards/AnimationSettingsCard.tsx @@ -14,7 +14,7 @@ const animationSettings: CSSAnimationSettings = { animationDirection: 'alternate', animationDuration: '2s', animationIterationCount: 'infinite', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', }; const AnimationSettingsCard: RouteCardComponent = (props) => ( diff --git a/apps/common-app/src/apps/css/examples/animations/routeCards/MiscellaneousCard.tsx b/apps/common-app/src/apps/css/examples/animations/routeCards/MiscellaneousCard.tsx index 69c8b349f504..80b1a8dae568 100644 --- a/apps/common-app/src/apps/css/examples/animations/routeCards/MiscellaneousCard.tsx +++ b/apps/common-app/src/apps/css/examples/animations/routeCards/MiscellaneousCard.tsx @@ -116,7 +116,7 @@ const styles = css.create({ box: { animationDuration: ANIMATION_DURATION, animationIterationCount: 'infinite', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', backgroundColor: colors.primary, borderRadius: radius.sm, height: sizes.md, diff --git a/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx b/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx index cd3b36860075..6fd6e80c15ce 100644 --- a/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx +++ b/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx @@ -273,7 +273,7 @@ const styles = css.create({ animationDuration: `${TIME_MULTIPLIER * 0.6}s`, animationIterationCount: 'infinite', animationName: propulsedFlame, - animationTimingFunction: 'easeIn', + animationTimingFunction: 'ease-in', }, scene: { transform: [ @@ -286,7 +286,7 @@ const styles = css.create({ animationDuration: `${TIME_MULTIPLIER * 0.48}s`, animationIterationCount: 'infinite', animationName: propulsedSpark, - animationTimingFunction: 'easeIn', + animationTimingFunction: 'ease-in', height: 0.5 * sizes.xxxs, width: 0.5 * sizes.xxxs, }, diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorFormats.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorFormats.tsx index d77fcba4a531..5bb6955aab30 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorFormats.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorFormats.tsx @@ -20,7 +20,7 @@ export default function ColorsFormats() { backgroundColor: to, }, }, - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', })} renderExample={({ animation }) => ( @@ -35,7 +35,7 @@ export default function ColorsFormats() { from: { backgroundColor: from }, to: { backgroundColor: to }, }, - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', }), name: 'Predefined', sections: [ diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx index 21eb29b07d97..af18731dfb65 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx @@ -27,7 +27,7 @@ const sharedConfig: CSSAnimationSettings = { animationDirection: 'alternate', animationDuration: '3s', animationIterationCount: 'infinite', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', }; export default function ColorProperties() { diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/layoutAndPositioning/others/Display.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/layoutAndPositioning/others/Display.tsx index 5813d9cdc64c..c40968acf7dc 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/layoutAndPositioning/others/Display.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/layoutAndPositioning/others/Display.tsx @@ -19,7 +19,7 @@ export default function Display() { animationDuration: '1s', animationFillMode: 'both', animationName: keyframes, - animationTimingFunction: 'easeOut', + animationTimingFunction: 'ease-out', })} renderExample={({ animation }) => ( diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationDirection.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationDirection.tsx index db41a19908dc..2e4309bb3127 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationDirection.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationDirection.tsx @@ -30,8 +30,8 @@ export default function AnimationDirection() { { animationDirection: 'reverse', label: 'reverse' }, { animationDirection: 'alternate', label: 'alternate' }, { - animationDirection: 'alternateReverse', - label: 'alternateReverse', + animationDirection: 'alternate-reverse', + label: 'alternate-reverse', }, ], title: 'Animation Direction', diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationPlayState.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationPlayState.tsx index 053f0727fb02..6710a4b3183c 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationPlayState.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationPlayState.tsx @@ -26,7 +26,7 @@ export default function AnimationPlayState() { transform: [{ translateX: '-100%' }], }, }, - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', }} cards={[ { diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationTimingFunction.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationTimingFunction.tsx index 25a200fb4b7a..914d5ba0749a 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationTimingFunction.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animationSettings/AnimationTimingFunction.tsx @@ -38,16 +38,19 @@ export default function AnimationTimingFunction() { { items: [ { animationTimingFunction: 'ease', label: 'ease' }, - { animationTimingFunction: 'easeIn', label: 'easeIn' }, - { animationTimingFunction: 'easeOut', label: 'easeOut' }, - { animationTimingFunction: 'easeInOut', label: 'easeInOut' }, + { animationTimingFunction: 'ease-in', label: 'ease-in' }, + { animationTimingFunction: 'ease-out', label: 'ease-out' }, + { + animationTimingFunction: 'ease-in-out', + label: 'ease-in-out', + }, { animationTimingFunction: 'linear', label: 'linear' }, - { animationTimingFunction: 'stepStart', label: 'stepStart' }, + { animationTimingFunction: 'step-start', label: 'step-start' }, { animationFillMode: 'forwards', animationIterationCount: 1, - animationTimingFunction: 'stepEnd', - label: 'stepEnd', + animationTimingFunction: 'step-end', + label: 'step-end', }, ], title: 'Predefined Easings', @@ -121,20 +124,20 @@ export default function AnimationTimingFunction() { 'Creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps.', items: [ { - animationTimingFunction: steps(2, 'jumpStart'), - label: steps(2, 'jumpStart').toString(), + animationTimingFunction: steps(2, 'jump-start'), + label: steps(2, 'jump-start').toString(), }, { - animationTimingFunction: steps(4, 'jumpEnd'), - label: steps(4, 'jumpEnd').toString(), + animationTimingFunction: steps(4, 'jump-end'), + label: steps(4, 'jump-end').toString(), }, { - animationTimingFunction: steps(5, 'jumpNone'), - label: steps(5, 'jumpNone').toString(), + animationTimingFunction: steps(5, 'jump-none'), + label: steps(5, 'jump-none').toString(), }, { - animationTimingFunction: steps(3, 'jumpBoth'), - label: steps(3, 'jumpBoth').toString(), + animationTimingFunction: steps(3, 'jump-both'), + label: steps(3, 'jump-both').toString(), }, ], title: 'Steps Easing', diff --git a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/ChangingAnimation.tsx b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/ChangingAnimation.tsx index 8e806d4bd174..0ed71c85fcc9 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/ChangingAnimation.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/ChangingAnimation.tsx @@ -20,7 +20,7 @@ import { colors, flex, radius, sizes, spacing } from '@/theme'; const animationSettings: CSSAnimationSettings = { animationDuration: '1s', animationIterationCount: 'infinite', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', }; const wiggle = css.keyframes({ diff --git a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/KeyframeTimingFunctions.tsx b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/KeyframeTimingFunctions.tsx index f80a7abb8e27..afc565ae1319 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/KeyframeTimingFunctions.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/KeyframeTimingFunctions.tsx @@ -31,8 +31,8 @@ import { colors, flex, radius, sizes, spacing } from '@/theme'; const AVAILABLE_TIMING_FUNCTIONS = [ 'linear', 'ease', - 'easeIn', - 'easeOut', + 'ease-in', + 'ease-out', cubicBezier(0.175, 0.885, 0.32, 1.275), steps(4), ] satisfies Array; @@ -56,7 +56,7 @@ const DEFAULT_ANIMATION_CONFIG: SelectableConfig = { animationIterationCount: 'infinite', animationName: { '0%': { - $animationTimingFunction: getOptions('easeIn'), + $animationTimingFunction: getOptions('ease-in'), transform: [{ translateX: -sizes.lg }], width: sizes.xl, }, diff --git a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/MultipleAnimations.tsx b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/MultipleAnimations.tsx index 7f3a8d4b822a..8ba577b1541a 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/MultipleAnimations.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/MultipleAnimations.tsx @@ -61,7 +61,7 @@ const DEFAULT_ANIMATION_SETTINGS: SelectableConfig = { $animationDirection: { canDisable: true, maxNumberOfValues: 3, - options: ['normal', 'reverse', 'alternate', 'alternateReverse'], + options: ['normal', 'reverse', 'alternate', 'alternate-reverse'], value: 'alternate', }, $animationDuration: { @@ -93,11 +93,11 @@ const DEFAULT_ANIMATION_SETTINGS: SelectableConfig = { maxNumberOfValues: 3, options: [ 'linear', - 'easeInOut', + 'ease-in-out', steps(5), cubicBezier(0.175, 0.885, 0.32, 1.275), ], - value: ['easeInOut', cubicBezier(0.175, 0.885, 0.32, 1.275)], + value: ['ease-in-out', cubicBezier(0.175, 0.885, 0.32, 1.275)], }, }; diff --git a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/UpdatingAnimationSettings.tsx b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/UpdatingAnimationSettings.tsx index 7797975b118d..928f98708dbb 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/UpdatingAnimationSettings.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/UpdatingAnimationSettings.tsx @@ -31,7 +31,7 @@ const keyframes: CSSAnimationKeyframes = { const SETTINGS_OPTIONS = { animationDelay: ['-5s', '0s', '1s', '2s', '5s'], - animationDirection: ['normal', 'reverse', 'alternate', 'alternateReverse'], + animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'], animationDuration: ['1s', '2s', '5s', '10s'], animationFillMode: ['none', 'forwards', 'backwards', 'both'], animationIterationCount: [1, 2, 'infinite'], @@ -39,8 +39,8 @@ const SETTINGS_OPTIONS = { animationTimingFunction: [ 'ease', 'linear', - 'easeIn', - 'easeOut', + 'ease-in', + 'ease-out', cubicBezier(0.42, 0, 0.58, 1), ], } satisfies { diff --git a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Campfire.tsx b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Campfire.tsx index 6aabaef718a1..77b96deee1db 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Campfire.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Campfire.tsx @@ -121,7 +121,7 @@ const styles = css.create({ flame: { animationDuration: ANIMATION_DURATION, animationIterationCount: 'infinite', - animationTimingFunction: 'easeIn', + animationTimingFunction: 'ease-in', backgroundColor: COLORS.yellow, borderRadius: radius.md, position: 'absolute', diff --git a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx index d3907c42fdaa..f8c047d8e3c0 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx @@ -297,7 +297,7 @@ const styles = css.create({ animationDuration: '0.3s', animationIterationCount: 'infinite', animationName: propulsedFlame, - animationTimingFunction: 'easeIn', + animationTimingFunction: 'ease-in', position: 'absolute', }, rocket: { @@ -314,7 +314,7 @@ const styles = css.create({ animationDuration: '0.24s', animationIterationCount: 'infinite', animationName: propulsedSpark, - animationTimingFunction: 'easeIn', + animationTimingFunction: 'ease-in', height: 10, position: 'absolute', width: 10, diff --git a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/SpinnersAndLoaders.tsx b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/SpinnersAndLoaders.tsx index f7faef633c77..8355c9e8cbee 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/SpinnersAndLoaders.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/SpinnersAndLoaders.tsx @@ -501,7 +501,7 @@ const RectangleBounceStyles = css.create({ animationDuration: '1.5s', animationIterationCount: 'infinite', animationName: rectangleBounce, - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', backgroundColor: colors.primary, height: '75%', width: '15%', @@ -537,7 +537,7 @@ const pulseStyles = css.create({ animationDuration: '1.5s', animationIterationCount: 'infinite', animationName: pulse, - animationTimingFunction: 'easeOut', + animationTimingFunction: 'ease-out', backgroundColor: colors.primary, borderRadius: '50%', height: '100%', @@ -577,7 +577,7 @@ const doublePulseStyles = css.create({ animationDuration: '1.5s', animationIterationCount: 'infinite', animationName: doublePulse, - animationTimingFunction: 'easeOut', + animationTimingFunction: 'ease-out', backgroundColor: colors.primary, borderRadius: '50%', }, @@ -617,7 +617,7 @@ const rectangleStyles = css.create({ animationDuration: '1.2s', animationIterationCount: 'infinite', animationName: rectangle, - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', backgroundColor: colors.primary, height: '75%', width: '75%', @@ -654,7 +654,7 @@ const threeDotsStyles = css.create({ animationDuration: '1.5s', animationIterationCount: 'infinite', animationName: threeDots, - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', backgroundColor: colors.primary, borderRadius: '50%', height: 0.25 * SPINNER_SIZE, @@ -703,7 +703,7 @@ const cubesStyles = css.create({ animationDuration: '1.5s', animationIterationCount: 'infinite', animationName: cube, - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', backgroundColor: colors.primary, height: (1 / 3) * SPINNER_SIZE, width: (1 / 3) * SPINNER_SIZE, diff --git a/apps/common-app/src/apps/css/examples/transitions/routeCards/TestExamplesCard.tsx b/apps/common-app/src/apps/css/examples/transitions/routeCards/TestExamplesCard.tsx index 06cfbd1a2fb2..05d9822cb202 100644 --- a/apps/common-app/src/apps/css/examples/transitions/routeCards/TestExamplesCard.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/routeCards/TestExamplesCard.tsx @@ -19,7 +19,7 @@ const TestExamplesCard: RouteCardComponent = (props) => ( const TRANSITION_CONFIG: CSSTransitionProperties = { transitionDuration: 500, transitionProperty: 'transform', - transitionTimingFunction: 'easeInOut', + transitionTimingFunction: 'ease-in-out', }; function Showcase() { diff --git a/apps/common-app/src/apps/css/examples/transitions/routeCards/TransitionSettingsCard.tsx b/apps/common-app/src/apps/css/examples/transitions/routeCards/TransitionSettingsCard.tsx index a412297c48c8..855dcccd1ad4 100644 --- a/apps/common-app/src/apps/css/examples/transitions/routeCards/TransitionSettingsCard.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/routeCards/TransitionSettingsCard.tsx @@ -69,7 +69,7 @@ function Showcase() { transitionDelay: index * 75, transitionDuration: 300, transitionProperty: 'height', - transitionTimingFunction: 'easeInOut', + transitionTimingFunction: 'ease-in-out', }, ]} /> diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ChangingTransitionProperty.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ChangingTransitionProperty.tsx index 344c513f7cc4..c204189f601f 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ChangingTransitionProperty.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ChangingTransitionProperty.tsx @@ -33,7 +33,7 @@ const PROPERTIES = [ const transitionSettings: CSSTransitionSettings = { transitionDuration: '1s', - transitionTimingFunction: 'easeInOut', + transitionTimingFunction: 'ease-in-out', }; const transitionStyles: Array = [ diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/MultipleTransitionSettings.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/MultipleTransitionSettings.tsx index 2fc05ca31720..1f7f75bd494a 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/MultipleTransitionSettings.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/MultipleTransitionSettings.tsx @@ -52,11 +52,11 @@ const DEFAULT_TRANSITION_CONFIG: SelectableConfig< maxNumberOfValues: 3, options: [ 'ease', - 'easeInOut', + 'ease-in-out', cubicBezier(0.175, 0.885, 0.32, 1.275), steps(5), ], - value: [cubicBezier(0.175, 0.885, 0.32, 1.275), 'easeInOut'], + value: [cubicBezier(0.175, 0.885, 0.32, 1.275), 'ease-in-out'], }, transitionBehavior: 'normal', }; diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ReversingShortening.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ReversingShortening.tsx index 17ac9d1af490..083d35bc2454 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ReversingShortening.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/ReversingShortening.tsx @@ -41,9 +41,9 @@ const DEFAULT_TRANSITION_CONFIG: SelectableConfig = { options: [ 'linear', 'ease', - 'easeIn', - 'easeOut', - 'easeInOut', + 'ease-in', + 'ease-out', + 'ease-in-out', cubicBezier(0.175, 0.885, 0.32, 1.275), steps(5), ], diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/UpdatingTransitionSettings.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/UpdatingTransitionSettings.tsx index 472acee520bf..8a804993fd3e 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/UpdatingTransitionSettings.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/UpdatingTransitionSettings.tsx @@ -27,14 +27,14 @@ import { colors, flex, radius, sizes, spacing } from '@/theme'; import { typedMemo } from '@/utils'; const SETTINGS_OPTIONS = { - transitionBehavior: ['normal', 'allowDiscrete'], + transitionBehavior: ['normal', 'allow-discrete'], transitionDelay: ['-5s', '0s', '1s', '2s', '5s'], transitionDuration: [0, '250ms', '1s', '2s', '5s', '10s'], transitionTimingFunction: [ 'ease', 'linear', - 'easeIn', - 'easeOut', + 'ease-in', + 'ease-out', cubicBezier(0.42, 0, 0.58, 1), ], } satisfies { diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/CircularPopupMenu.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/CircularPopupMenu.tsx index 7e1d2efc9198..3d1b7bae4d75 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/CircularPopupMenu.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/CircularPopupMenu.tsx @@ -59,7 +59,7 @@ function CircularMenu() { transitionProperty: ['all', 'backgroundColor'], transitionTimingFunction: [ cubicBezier(0.175, 0.885, 0.32, 1.275), - 'easeOut', + 'ease-out', ], }, ]}> diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx index 2a1b8a937ced..063b2b4db458 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx @@ -123,7 +123,7 @@ function GalleryCard({ flexGrow: expanded ? 100 : 1, transitionDuration: 300, transitionProperty: 'flexGrow', - transitionTimingFunction: 'easeInOut', + transitionTimingFunction: 'ease-in-out', }, ]}> diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/HamburgerMenuButtons.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/HamburgerMenuButtons.tsx index a88c0545ebdc..ddf73b7c0565 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/HamburgerMenuButtons.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/HamburgerMenuButtons.tsx @@ -157,7 +157,7 @@ const sharedStyles = StyleSheet.create({ const SHARED_CONFIG: CSSTransitionProperties = { transitionDuration: 300, transitionProperty: 'all', - transitionTimingFunction: 'easeOut', + transitionTimingFunction: 'ease-out', }; function Simple({ open }: ExampleComponentProps) { diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/testExamples/Playground.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/testExamples/Playground.tsx index 80497d24b877..e18d4f7e1750 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/testExamples/Playground.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/testExamples/Playground.tsx @@ -61,7 +61,7 @@ export default function Playground() { marginTop: 60, transitionDuration: '0.5s', transitionProperty: 'all', - transitionTimingFunction: 'easeInOut', + transitionTimingFunction: 'ease-in-out', width: 65, }, stateToStyle(state), diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionBehavior.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionBehavior.tsx index 98cb064320cb..93b9e7ddbfc6 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionBehavior.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionBehavior.tsx @@ -20,7 +20,7 @@ export default function TransitionBehavior() { ], items: [ { label: 'normal (default)' }, - { label: 'allowDiscrete', transitionBehavior: 'allowDiscrete' }, + { label: 'allow-discrete', transitionBehavior: 'allow-discrete' }, ], title: 'Transition Behavior', }, diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionTimingFunction.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionTimingFunction.tsx index b4ba43fbf369..b5fdce3405c4 100644 --- a/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionTimingFunction.tsx +++ b/apps/common-app/src/apps/css/examples/transitions/screens/transitionSettings/TransitionTimingFunction.tsx @@ -46,14 +46,17 @@ export default function TransitionTimingFunction() { { items: [ { label: 'ease', transitionTimingFunction: 'ease' }, - { label: 'easeIn', transitionTimingFunction: 'easeIn' }, - { label: 'easeOut', transitionTimingFunction: 'easeOut' }, - { label: 'easeInOut', transitionTimingFunction: 'easeInOut' }, + { label: 'ease-in', transitionTimingFunction: 'ease-in' }, + { label: 'ease-out', transitionTimingFunction: 'ease-out' }, + { + label: 'ease-in-out', + transitionTimingFunction: 'ease-in-out', + }, { label: 'linear', transitionTimingFunction: 'linear' }, - { label: 'stepStart', transitionTimingFunction: 'stepStart' }, + { label: 'step-start', transitionTimingFunction: 'step-start' }, { - label: 'stepEnd', - transitionTimingFunction: 'stepEnd', + label: 'step-end', + transitionTimingFunction: 'step-end', }, ], title: 'Predefined Easings', @@ -124,20 +127,20 @@ export default function TransitionTimingFunction() { 'Creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps.', items: [ { - label: steps(2, 'jumpStart').toString(), - transitionTimingFunction: steps(2, 'jumpStart'), + label: steps(2, 'jump-start').toString(), + transitionTimingFunction: steps(2, 'jump-start'), }, { - label: steps(4, 'jumpEnd').toString(), - transitionTimingFunction: steps(4, 'jumpEnd'), + label: steps(4, 'jump-end').toString(), + transitionTimingFunction: steps(4, 'jump-end'), }, { - label: steps(5, 'jumpNone').toString(), - transitionTimingFunction: steps(5, 'jumpNone'), + label: steps(5, 'jump-none').toString(), + transitionTimingFunction: steps(5, 'jump-none'), }, { - label: steps(3, 'jumpBoth').toString(), - transitionTimingFunction: steps(3, 'jumpBoth'), + label: steps(3, 'jump-both').toString(), + transitionTimingFunction: steps(3, 'jump-both'), }, ], title: 'Steps Easing', diff --git a/packages/docs-reanimated/docs/css-animations/animation-direction.mdx b/packages/docs-reanimated/docs/css-animations/animation-direction.mdx index f66b57d40be9..13749be3d398 100644 --- a/packages/docs-reanimated/docs/css-animations/animation-direction.mdx +++ b/packages/docs-reanimated/docs/css-animations/animation-direction.mdx @@ -43,7 +43,7 @@ type CSSAnimationDirection = | 'normal' | 'reverse' | 'alternate' - | 'alternateReverse'; + | 'alternate-reverse'; animationDirection: CSSAnimationDirection | CSSAnimationDirection[]; ``` @@ -64,7 +64,7 @@ Runs the animation backwards. For each animation iteration, the animation alternates between running forwards and backwards. -#### `alternateReverse` +#### `alternate-reverse` For each animation iteration, the animation alternates between running forwards and backwards but the first iteration runs backwards. diff --git a/packages/docs-reanimated/docs/css-animations/animation-timing-function.mdx b/packages/docs-reanimated/docs/css-animations/animation-timing-function.mdx index 937803ef0b63..a965e6de60e9 100644 --- a/packages/docs-reanimated/docs/css-animations/animation-timing-function.mdx +++ b/packages/docs-reanimated/docs/css-animations/animation-timing-function.mdx @@ -28,7 +28,7 @@ function App() { }, animationDuration: '3s', // highlight-next-line - animationTimingFunction: 'easeOut', + animationTimingFunction: 'ease-out', }} /> ); @@ -58,12 +58,12 @@ type NormalizedStepsEasing = { type ControlPoint = number | [number, ...Percentage[]]; type StepsModifier = - | 'jumpStart' + | 'jump-start' | 'start' - | 'jumpEnd' + | 'jump-end' | 'end' - | 'jumpNone' - | 'jumpBoth'; + | 'jump-none' + | 'jump-both'; type NormalizedCSSTimingFunction = | PredefinedTimingFunction @@ -74,11 +74,11 @@ type NormalizedCSSTimingFunction = type PredefinedTimingFunction = | 'linear' | 'ease' - | 'easeIn' - | 'easeOut' - | 'easeInOut' - | 'stepStart' - | 'stepEnd'; + | 'ease-in' + | 'ease-out' + | 'ease-in-out' + | 'step-start' + | 'step-end'; interface ParametrizedTimingFunction { toString(): string; @@ -101,11 +101,11 @@ A string representing a predefined timing function. Available functions: - `linear` - a constant speed from start to finish, - `ease` - starts slow, speeds up, then slows down, -- `easeIn` - starts slow and accelerates, -- `easeOut` - starts quickly and decelerates, -- `easeInOut` - starts slowly, speeds up, and then slows down again. -- `stepStart` - jumps instantly at the start, -- `stepEnd` - jumps instantly at the end. +- `ease-in` - starts slow and accelerates, +- `ease-out` - starts quickly and decelerates, +- `ease-in-out` - starts slowly, speeds up, and then slows down again. +- `step-start` - jumps instantly at the start, +- `step-end` - jumps instantly at the end. ```typescript animationTimingFunction: 'linear', @@ -139,20 +139,20 @@ animationTimingFunction: linear(0, [0.25, '75%'], 1), -- `steps(stepsNumber: number, modifier?: StepsModifier)` - creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps. Modifier defaults to `jumpEnd`. - - `jumpStart` - a left-continuous function, where the first jump occurs at the start of the transition, - - `jumpEnd` - a right-continuous function, where the final jump occurs at the end of the transition, - - `jumpNone` - no jump on either end. Maintaining a hold at both the 0% and 100% points, each for 1/n of the total duration, - - `jumpBoth` - adds pauses at both the 0% and 100% points, introducing an additional step during the transition, - - `start` - an alias for `jumpStart`, - - `end` - an alias for `jumpEnd`, +- `steps(stepsNumber: number, modifier?: StepsModifier)` - creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps. Modifier defaults to `jump-end`. + - `jump-start` - a left-continuous function, where the first jump occurs at the start of the transition, + - `jump-end` - a right-continuous function, where the final jump occurs at the end of the transition, + - `jump-none` - no jump on either end. Maintaining a hold at both the 0% and 100% points, each for 1/n of the total duration, + - `jump-both` - adds pauses at both the 0% and 100% points, introducing an additional step during the transition, + - `start` - an alias for `jump-start`, + - `end` - an alias for `jump-end`, ```typescript import { steps } from 'react-native-reanimated'; -animationTimingFunction: steps(4, 'jumpEnd'), +animationTimingFunction: steps(4, 'jump-end'), ``` @@ -163,11 +163,11 @@ An array of timing functions. The order in this array corresponds to the array o ```javascript // highlight-next-line -animationTimingFunction: ['linear', steps(60, 'jumpNone'), 'easeInOut']; +animationTimingFunction: ['linear', steps(60, 'jump-none'), 'ease-in-out']; transitionProperty: [bounceIn, move, slide]; ``` -In the following example, the `bounceIn` keyframe will be animated using `linear` easing, `move` will use the `steps` timing function, and `slide` will be animated using `easeInOut` easing. +In the following example, the `bounceIn` keyframe will be animated using `linear` easing, `move` will use the `steps` timing function, and `slide` will be animated using `ease-in-out` easing. ## Remarks diff --git a/packages/docs-reanimated/docs/css-transitions/transition-behavior.mdx b/packages/docs-reanimated/docs/css-transitions/transition-behavior.mdx index ce2bb268df1f..4c9f645b5b01 100644 --- a/packages/docs-reanimated/docs/css-transitions/transition-behavior.mdx +++ b/packages/docs-reanimated/docs/css-transitions/transition-behavior.mdx @@ -24,7 +24,7 @@ function App() { transitionProperty: 'alignItems', transitionDuration: 500, // highlight-next-line - transitionBehavior: 'allowDiscrete', + transitionBehavior: 'allow-discrete', }} /> ); @@ -35,7 +35,7 @@ function App() { Type definitions ```typescript -type CSSTransitionBehavior = 'normal' | 'allowDiscrete'; +type CSSTransitionBehavior = 'normal' | 'allow-discrete'; ``` diff --git a/packages/docs-reanimated/docs/css-transitions/transition-timing-function.mdx b/packages/docs-reanimated/docs/css-transitions/transition-timing-function.mdx index 1e49ce3d0736..9189aaee14f9 100644 --- a/packages/docs-reanimated/docs/css-transitions/transition-timing-function.mdx +++ b/packages/docs-reanimated/docs/css-transitions/transition-timing-function.mdx @@ -24,7 +24,7 @@ function App() { transitionProperty: 'height', transitionDuration: 300, // highlight-next-line - transitionTimingFunction: 'easeOut', + transitionTimingFunction: 'ease-out', }} /> ); @@ -54,12 +54,12 @@ type NormalizedStepsEasing = { type ControlPoint = number | [number, ...Percentage[]]; type StepsModifier = - | 'jumpStart' + | 'jump-start' | 'start' - | 'jumpEnd' + | 'jump-end' | 'end' - | 'jumpNone' - | 'jumpBoth'; + | 'jump-none' + | 'jump-both'; type NormalizedCSSTimingFunction = | PredefinedTimingFunction @@ -70,11 +70,11 @@ type NormalizedCSSTimingFunction = type PredefinedTimingFunction = | 'linear' | 'ease' - | 'easeIn' - | 'easeOut' - | 'easeInOut' - | 'stepStart' - | 'stepEnd'; + | 'ease-in' + | 'ease-out' + | 'ease-in-out' + | 'step-start' + | 'step-end'; interface ParametrizedTimingFunction { toString(): string; @@ -97,11 +97,11 @@ A string representing a predefined timing function. Available functions: - `linear` - a constant speed from start to finish, - `ease` - starts slow, speeds up, then slows down, -- `easeIn` - starts slow and accelerates, -- `easeOut` - starts quickly and decelerates, -- `easeInOut` - starts slowly, speeds up, and then slows down again. -- `stepStart` - jumps instantly at the start, -- `stepEnd` - jumps instantly at the end. +- `ease-in` - starts slow and accelerates, +- `ease-out` - starts quickly and decelerates, +- `ease-in-out` - starts slowly, speeds up, and then slows down again. +- `step-start` - jumps instantly at the start, +- `step-end` - jumps instantly at the end. ```typescript transitionTimingFunction: 'linear', @@ -135,20 +135,20 @@ transitionTimingFunction: linear(0, [0.25, '75%'], 1), -- `steps(stepsNumber: number, modifier?: StepsModifier)` - creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps. Modifier defaults to `jumpEnd`. - - `jumpStart` - a left-continuous function, where the first jump occurs at the start of the transition, - - `jumpEnd` - a right-continuous function, where the final jump occurs at the end of the transition, - - `jumpNone` - no jump on either end. Maintaining a hold at both the 0% and 100% points, each for 1/n of the total duration, - - `jumpBoth` - adds pauses at both the 0% and 100% points, introducing an additional step during the transition, - - `start` - an alias for `jumpStart`, - - `end` - an alias for `jumpEnd`, +- `steps(stepsNumber: number, modifier?: StepsModifier)` - creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps. Modifier defaults to `jump-end`. + - `jump-start` - a left-continuous function, where the first jump occurs at the start of the transition, + - `jump-end` - a right-continuous function, where the final jump occurs at the end of the transition, + - `jump-none` - no jump on either end. Maintaining a hold at both the 0% and 100% points, each for 1/n of the total duration, + - `jump-both` - adds pauses at both the 0% and 100% points, introducing an additional step during the transition, + - `start` - an alias for `jump-start`, + - `end` - an alias for `jump-end`, ```typescript import { steps } from 'react-native-reanimated'; -transitionTimingFunction: steps(4, 'jumpEnd'), +transitionTimingFunction: steps(4, 'jump-end'), ``` @@ -159,11 +159,11 @@ An array of timing functions. The order in this array corresponds to the array o ```typescript // highlight-next-line -transitionTimingFunction: ['linear', steps(60, 'jumpNone'), 'easeInOut']; +transitionTimingFunction: ['linear', steps(60, 'jump-none'), 'ease-in-out']; transitionProperty: ['width', 'transform', 'borderRadius']; ``` -In the following example, the `width` property will be transitions using `linear` easing, `transform` will use the `steps` timing function, and `borderRadius` will be transitioned using `easeInOut` easing. +In the following example, the `width` property will be transitions using `linear` easing, `transform` will use the `steps` timing function, and `borderRadius` will be transitioned using `ease-in-out` easing. ## Examples diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationDirection.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationDirection.tsx index d2ea9b92f51b..3288d5850280 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationDirection.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationDirection.tsx @@ -29,7 +29,7 @@ export default function App() { animationTimingFunction: 'ease', animationDelay: 250 * id, // highlight-next-line - animationDirection: 'alternateReverse', + animationDirection: 'alternate-reverse', animationIterationCount: 'infinite', }, ]} diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationDirectionBasic.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationDirectionBasic.tsx index d4767091cca4..10044fb347ed 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationDirectionBasic.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationDirectionBasic.tsx @@ -17,7 +17,7 @@ export default function App() { animationName: grow, animationDuration: '1s', animationIterationCount: 'infinite', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', // highlight-next-line animationDirection: 'alternate', }, diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationDurationBasic.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationDurationBasic.tsx index 1ffd5df55e8a..45a72e31d110 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationDurationBasic.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationDurationBasic.tsx @@ -23,7 +23,7 @@ export default function App() { animationDuration: '2s', animationIterationCount: 'infinite', animationDirection: 'alternate', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', }, ]} /> diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationFillModeBasic.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationFillModeBasic.tsx index 341706985190..9f5eee5c35c5 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationFillModeBasic.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationFillModeBasic.tsx @@ -20,7 +20,7 @@ export default function App() { { animationName: pulse, animationDuration: '1s', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', // highlight-next-line animationFillMode: 'forwards', }, diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationName.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationName.tsx index 75915d7cb4e7..2ea0f670e08e 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationName.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationName.tsx @@ -37,7 +37,7 @@ export default function App() { // highlight-next-line animationName: march, animationDuration: '2.5s', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', animationIterationCount: 'infinite', animationDirection: 'alternate', }, diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationNameBasic.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationNameBasic.tsx index c466bde4cc06..bc0fe6681520 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationNameBasic.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationNameBasic.tsx @@ -24,7 +24,7 @@ export default function App() { animationName: pulse, animationDuration: '1s', animationIterationCount: 'infinite', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', animationDirection: 'alternate', }, ]} diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunction.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunction.tsx index 86ab30ff042d..13d14195ab7c 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunction.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunction.tsx @@ -3,10 +3,10 @@ import { StyleSheet, View, Text } from 'react-native'; import Animated, { steps } from 'react-native-reanimated'; const stepsModifiers = [ - 'jumpStart', - 'jumpEnd', - 'jumpNone', - 'jumpBoth', + 'jump-start', + 'jump-end', + 'jump-none', + 'jump-both', ] as const; export default function App() { diff --git a/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunctionBasic.tsx b/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunctionBasic.tsx index d2397b6329c9..f76738b8c73a 100644 --- a/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunctionBasic.tsx +++ b/packages/docs-reanimated/src/examples/css-animations/AnimationTimingFunctionBasic.tsx @@ -17,7 +17,7 @@ const square: CSSAnimationKeyframes = { }, '50%': { transform: [{ translateX: 80 }, { translateY: 80 }], - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', }, '75%': { transform: [{ translateX: -80 }, { translateY: 80 }], diff --git a/packages/docs-reanimated/src/examples/css-transitions/TransitionBehavior.tsx b/packages/docs-reanimated/src/examples/css-transitions/TransitionBehavior.tsx index f3440ea9557d..1bedb5fde6f4 100644 --- a/packages/docs-reanimated/src/examples/css-transitions/TransitionBehavior.tsx +++ b/packages/docs-reanimated/src/examples/css-transitions/TransitionBehavior.tsx @@ -18,7 +18,7 @@ export default function App() { transitionProperty: ['justifyContent'], transitionDuration: '1s', // highlight-next-line - transitionBehavior: 'allowDiscrete', + transitionBehavior: 'allow-discrete', }, ]}> {colors.map((_, id) => ( diff --git a/packages/docs-reanimated/src/examples/css-transitions/TransitionBehaviorBasic.tsx b/packages/docs-reanimated/src/examples/css-transitions/TransitionBehaviorBasic.tsx index c24fc302c72c..98523b0efb86 100644 --- a/packages/docs-reanimated/src/examples/css-transitions/TransitionBehaviorBasic.tsx +++ b/packages/docs-reanimated/src/examples/css-transitions/TransitionBehaviorBasic.tsx @@ -16,7 +16,7 @@ export default function App() { transitionProperty: ['alignSelf', 'backgroundColor'], transitionDuration: '1s', // highlight-next-line - transitionBehavior: 'allowDiscrete', + transitionBehavior: 'allow-discrete', }, ]} /> diff --git a/packages/docs-reanimated/src/examples/css-transitions/TransitionTimingFunctionSteps.tsx b/packages/docs-reanimated/src/examples/css-transitions/TransitionTimingFunctionSteps.tsx index 368ea7d9f98e..af587891ec92 100644 --- a/packages/docs-reanimated/src/examples/css-transitions/TransitionTimingFunctionSteps.tsx +++ b/packages/docs-reanimated/src/examples/css-transitions/TransitionTimingFunctionSteps.tsx @@ -3,10 +3,10 @@ import { StyleSheet, View, Button, Text } from 'react-native'; import Animated, { steps } from 'react-native-reanimated'; const stepsModifiers = [ - 'jumpStart', - 'jumpEnd', - 'jumpNone', - 'jumpBoth', + 'jump-start', + 'jump-end', + 'jump-none', + 'jump-both', ] as const; export default function App() { diff --git a/packages/docs-reanimated/versioned_docs/version-1.x/transitions.md b/packages/docs-reanimated/versioned_docs/version-1.x/transitions.md index 78c2677cfef0..57b7b4733cb3 100644 --- a/packages/docs-reanimated/versioned_docs/version-1.x/transitions.md +++ b/packages/docs-reanimated/versioned_docs/version-1.x/transitions.md @@ -36,7 +36,7 @@ Use this if you want the animation to start delayed (value in milliseconds) #### `interpolation` -Specify the transition timing curve. Possible values are: `linear`, `easeIn`, `easeOut`, `easeInOut` +Specify the transition timing curve. Possible values are: `linear`, `ease-in`, `ease-out`, `ease-in-out` #### `propagation` diff --git a/packages/react-native-reanimated/Common/cpp/reanimated/CSS/config/CSSAnimationConfig.cpp b/packages/react-native-reanimated/Common/cpp/reanimated/CSS/config/CSSAnimationConfig.cpp index e00ff5e60ca7..6fb98ce04bd8 100644 --- a/packages/react-native-reanimated/Common/cpp/reanimated/CSS/config/CSSAnimationConfig.cpp +++ b/packages/react-native-reanimated/Common/cpp/reanimated/CSS/config/CSSAnimationConfig.cpp @@ -39,7 +39,7 @@ AnimationDirection getDirection(jsi::Runtime &rt, const jsi::Object &config) { {"normal", AnimationDirection::Normal}, {"reverse", AnimationDirection::Reverse}, {"alternate", AnimationDirection::Alternate}, - {"alternateReverse", AnimationDirection::AlternateReverse}}; + {"alternate-reverse", AnimationDirection::AlternateReverse}}; const auto str = config.getProperty(rt, "direction").asString(rt).utf8(rt); auto it = strToEnumMap.find(str); diff --git a/packages/react-native-reanimated/Common/cpp/reanimated/CSS/easing/EasingFunctions.cpp b/packages/react-native-reanimated/Common/cpp/reanimated/CSS/easing/EasingFunctions.cpp index cdac3668532f..d8c9c0edeffc 100644 --- a/packages/react-native-reanimated/Common/cpp/reanimated/CSS/easing/EasingFunctions.cpp +++ b/packages/react-native-reanimated/Common/cpp/reanimated/CSS/easing/EasingFunctions.cpp @@ -7,11 +7,11 @@ inline const std::unordered_map PREDEFINED_EASING_MAP = { {"linear", [](double x) { return x; }}, {"ease", cubicBezier(0.25, 0.1, 0.25, 0.1)}, - {"easeIn", cubicBezier(0.42, 0.0, 1.0, 1.0)}, - {"easeOut", cubicBezier(0.0, 0.0, 0.58, 1.0)}, - {"easeInOut", cubicBezier(0.42, 0.0, 0.58, 1.0)}, - {"stepStart", steps(std::vector{0}, std::vector{1})}, - {"stepEnd", + {"ease-in", cubicBezier(0.42, 0.0, 1.0, 1.0)}, + {"ease-out", cubicBezier(0.0, 0.0, 0.58, 1.0)}, + {"ease-in-out", cubicBezier(0.42, 0.0, 0.58, 1.0)}, + {"step-start", steps(std::vector{0}, std::vector{1})}, + {"step-end", steps(std::vector{0, 1}, std::vector{0, 1})}}; EasingFunction createEasingFunction( diff --git a/packages/react-native-reanimated/src/css/easings/__tests__/steps.test.ts b/packages/react-native-reanimated/src/css/easings/__tests__/steps.test.ts index bb61dc18c68d..277754e462c8 100644 --- a/packages/react-native-reanimated/src/css/easings/__tests__/steps.test.ts +++ b/packages/react-native-reanimated/src/css/easings/__tests__/steps.test.ts @@ -19,10 +19,10 @@ describe(StepsEasing, () => { describe('toString', () => { it.each([ - [1, 'jumpEnd', 'steps(1, jumpEnd)'], - [2, 'jumpStart', 'steps(2, jumpStart)'], - [3, 'jumpBoth', 'steps(3, jumpBoth)'], - [4, 'jumpNone', 'steps(4, jumpNone)'], + [1, 'jump-end', 'steps(1, jump-end)'], + [2, 'jump-start', 'steps(2, jump-start)'], + [3, 'jump-both', 'steps(3, jump-both)'], + [4, 'jump-none', 'steps(4, jump-none)'], ] satisfies [number, StepsModifier, string][])( 'returns correct string for %s steps and %s modifier', (stepsNumber, modifier, expected) => { @@ -33,9 +33,9 @@ describe(StepsEasing, () => { }); describe('normalize', () => { - describe('jumpStart', () => { + describe('jump-start', () => { it('returns correct normalized object', () => { - const easing = new StepsEasing(4, 'jumpStart'); + const easing = new StepsEasing(4, 'jump-start'); expect(easing.normalize()).toEqual({ name: 'steps', points: [ @@ -48,9 +48,9 @@ describe(StepsEasing, () => { }); }); - describe('jumpEnd', () => { + describe('jump-end', () => { it('returns correct normalized object', () => { - const easing = new StepsEasing(4, 'jumpEnd'); + const easing = new StepsEasing(4, 'jump-end'); expect(easing.normalize()).toEqual({ name: 'steps', points: [ @@ -64,9 +64,9 @@ describe(StepsEasing, () => { }); }); - describe('jumpBoth', () => { + describe('jump-both', () => { it('returns correct normalized object', () => { - const easing = new StepsEasing(4, 'jumpBoth'); + const easing = new StepsEasing(4, 'jump-both'); expect(easing.normalize()).toEqual({ name: 'steps', points: [ diff --git a/packages/react-native-reanimated/src/css/easings/index.ts b/packages/react-native-reanimated/src/css/easings/index.ts index f327ab97123f..9def3270aeaa 100644 --- a/packages/react-native-reanimated/src/css/easings/index.ts +++ b/packages/react-native-reanimated/src/css/easings/index.ts @@ -10,7 +10,7 @@ export function cubicBezier(x1: number, y1: number, x2: number, y2: number) { export function steps( stepsNumber: number, - modifier: StepsModifier = 'jumpEnd' + modifier: StepsModifier = 'jump-end' ) { return new StepsEasing(stepsNumber, modifier); } diff --git a/packages/react-native-reanimated/src/css/easings/steps.ts b/packages/react-native-reanimated/src/css/easings/steps.ts index 69c1e9d19092..4e0b336802b4 100644 --- a/packages/react-native-reanimated/src/css/easings/steps.ts +++ b/packages/react-native-reanimated/src/css/easings/steps.ts @@ -17,7 +17,7 @@ export class StepsEasing implements ParametrizedTimingFunction { readonly stepsNumber: number; readonly modifier: StepsModifier; - constructor(stepsNumber: number, modifier: StepsModifier = 'jumpEnd') { + constructor(stepsNumber: number, modifier: StepsModifier = 'jump-end') { if (stepsNumber <= 0 || stepsNumber % 1 !== 0) { throw new ReanimatedError(ERROR_MESSAGES.invalidStepsNumber(stepsNumber)); } @@ -31,15 +31,15 @@ export class StepsEasing implements ParametrizedTimingFunction { normalize(): NormalizedStepsEasing | 'linear' { switch (this.modifier) { - case 'jumpStart': + case 'jump-start': case 'start': return this.jumpStart(); - case 'jumpEnd': + case 'jump-end': case 'end': return this.jumpEnd(); - case 'jumpBoth': + case 'jump-both': return this.jumpBoth(); - case 'jumpNone': + case 'jump-none': default: if (this.stepsNumber === 1) { // CSS animations standard returns here linear easing diff --git a/packages/react-native-reanimated/src/css/easings/types.ts b/packages/react-native-reanimated/src/css/easings/types.ts index 89d38b41e306..204619fee40d 100644 --- a/packages/react-native-reanimated/src/css/easings/types.ts +++ b/packages/react-native-reanimated/src/css/easings/types.ts @@ -22,21 +22,21 @@ export type NormalizedStepsEasing = { export type ControlPoint = number | [number, ...Percentage[]]; export type StepsModifier = - | 'jumpStart' + | 'jump-start' | 'start' - | 'jumpEnd' + | 'jump-end' | 'end' - | 'jumpNone' - | 'jumpBoth'; + | 'jump-none' + | 'jump-both'; export type PredefinedTimingFunction = | 'linear' | 'ease' - | 'easeIn' - | 'easeOut' - | 'easeInOut' - | 'stepStart' - | 'stepEnd'; + | 'ease-in' + | 'ease-out' + | 'ease-in-out' + | 'step-start' + | 'step-end'; export type CSSTimingFunction = | PredefinedTimingFunction diff --git a/packages/react-native-reanimated/src/css/managers/__tests__/CSSAnimationsManager.test.ts b/packages/react-native-reanimated/src/css/managers/__tests__/CSSAnimationsManager.test.ts index a3130f15cc51..cf90f5756b99 100644 --- a/packages/react-native-reanimated/src/css/managers/__tests__/CSSAnimationsManager.test.ts +++ b/packages/react-native-reanimated/src/css/managers/__tests__/CSSAnimationsManager.test.ts @@ -67,7 +67,7 @@ describe('CSSAnimationsManager', () => { from: { opacity: 0 }, }, animationDuration: '3s', - animationTimingFunction: 'easeIn', + animationTimingFunction: 'ease-in', }; manager.update(animationProperties); @@ -80,7 +80,7 @@ describe('CSSAnimationsManager', () => { expect(updateCSSAnimations).toHaveBeenCalledWith(viewTag, [ { index: 0, - settings: { duration: 3000, timingFunction: 'easeIn', delay: 0 }, + settings: { duration: 3000, timingFunction: 'ease-in', delay: 0 }, }, ]); expect(registerCSSAnimations).toHaveBeenCalledTimes(1); diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/animationName.test.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/animationName.test.ts index e27813205978..c198503228f8 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/animationName.test.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/animationName.test.ts @@ -208,10 +208,10 @@ describe(normalizeAnimationKeyframes, () => { it('moves timing functions from keyframes to keyframeTimingFunctions', () => { expect( normalizeAnimationKeyframes({ - '0%, 90%': { opacity: 0, animationTimingFunction: 'easeIn' }, + '0%, 90%': { opacity: 0, animationTimingFunction: 'ease-in' }, '25%, 35%, 70%': { opacity: 0.5, animationTimingFunction: 'ease' }, '50%': { opacity: 0.75 }, - '75%': { opacity: 1, animationTimingFunction: 'easeOut' }, + '75%': { opacity: 1, animationTimingFunction: 'ease-out' }, }) ).toEqual({ keyframesStyle: { @@ -226,12 +226,12 @@ describe(normalizeAnimationKeyframes, () => { ], }, keyframeTimingFunctions: { - 0: 'easeIn', + 0: 'ease-in', 0.25: 'ease', 0.35: 'ease', 0.7: 'ease', - 0.75: 'easeOut', - 0.9: 'easeIn', + 0.75: 'ease-out', + 0.9: 'ease-in', }, }); }); @@ -239,7 +239,7 @@ describe(normalizeAnimationKeyframes, () => { it('ignores timing function for keyframe with offset 1', () => { expect( normalizeAnimationKeyframes({ - '0%, 100%': { opacity: 0, animationTimingFunction: 'easeIn' }, + '0%, 100%': { opacity: 0, animationTimingFunction: 'ease-in' }, }) ).toEqual({ keyframesStyle: { @@ -249,7 +249,7 @@ describe(normalizeAnimationKeyframes, () => { ], }, keyframeTimingFunctions: { - 0: 'easeIn', + 0: 'ease-in', }, }); }); diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/properties.test.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/properties.test.ts index c420b5e61008..957811b870e8 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/properties.test.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/properties.test.ts @@ -67,7 +67,7 @@ describe(createSingleCSSAnimationProperties, () => { { from: { opacity: 0.5 }, to: { opacity: 1 } }, ], animationDuration: ['1.5s', 2000], - animationTimingFunction: ['easeInOut', bezier], + animationTimingFunction: ['ease-in-out', bezier], animationDelay: ['300ms', 500], animationIterationCount: [3, 1], animationDirection: ['reverse', 'normal'], @@ -82,7 +82,7 @@ describe(createSingleCSSAnimationProperties, () => { to: { opacity: 0.5 }, }, animationDuration: '1.5s', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', animationDelay: '300ms', animationIterationCount: 3, animationDirection: 'reverse', @@ -112,7 +112,7 @@ describe(createSingleCSSAnimationProperties, () => { { from: { opacity: 0.5 }, to: { opacity: 1 } }, ], animationDuration: '1.5s', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', animationIterationCount: 3, animationFillMode: 'both', }; @@ -124,7 +124,7 @@ describe(createSingleCSSAnimationProperties, () => { to: { opacity: 0.5 }, }, animationDuration: '1.5s', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', animationDelay: undefined, animationIterationCount: 3, animationDirection: undefined, @@ -137,7 +137,7 @@ describe(createSingleCSSAnimationProperties, () => { to: { opacity: 1 }, }, animationDuration: '1.5s', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', animationDelay: undefined, animationIterationCount: 3, animationDirection: undefined, @@ -155,7 +155,12 @@ describe(createSingleCSSAnimationProperties, () => { { from: { height: '100%' }, to: { height: '50%' } }, ], animationDuration: ['1.5s', '2s'], - animationTimingFunction: ['easeInOut', 'easeIn', 'easeOut', 'linear'], + animationTimingFunction: [ + 'ease-in-out', + 'ease-in', + 'ease-out', + 'linear', + ], animationIterationCount: [3, Infinity], animationFillMode: ['both'], }; @@ -167,7 +172,7 @@ describe(createSingleCSSAnimationProperties, () => { to: { opacity: 0.5 }, }, animationDuration: '1.5s', - animationTimingFunction: 'easeInOut', + animationTimingFunction: 'ease-in-out', animationDelay: undefined, animationIterationCount: 3, animationDirection: undefined, @@ -180,7 +185,7 @@ describe(createSingleCSSAnimationProperties, () => { to: { width: '50%' }, }, animationDuration: '2s', - animationTimingFunction: 'easeIn', + animationTimingFunction: 'ease-in', animationDelay: undefined, animationIterationCount: Infinity, animationDirection: undefined, @@ -193,7 +198,7 @@ describe(createSingleCSSAnimationProperties, () => { to: { height: '50%' }, }, animationDuration: '1.5s', - animationTimingFunction: 'easeOut', + animationTimingFunction: 'ease-out', animationDelay: undefined, animationIterationCount: 3, animationDirection: undefined, diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/settings.test.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/settings.test.ts index b0bd02f144ae..0d0d6de0c0ee 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/settings.test.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/__tests__/settings.test.ts @@ -35,7 +35,7 @@ describe(normalizeDirection, () => { }); describe('when invalid value is passed', () => { - it.each(['invalid', 'normal ', 'alternate-reverse'])( + it.each(['invalid', 'normal ', 'alternateReverse'])( 'throws an error for %p', (direction) => { const value = direction as CSSAnimationDirection; @@ -202,7 +202,7 @@ describe(getAnimationSettingsUpdates, () => { { playState: 'paused' }, { duration: 2000, - timingFunction: 'easeIn', + timingFunction: 'ease-in', direction: 'reverse', iterationCount: 2, fillMode: 'forwards', diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/constants.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/constants.ts index be6adbd201b0..0a3e56556b3d 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/animation/constants.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/animation/constants.ts @@ -9,7 +9,7 @@ export const VALID_ANIMATION_DIRECTIONS = new Set([ 'normal', 'reverse', 'alternate', - 'alternateReverse', + 'alternate-reverse', ]); export const VALID_FILL_MODES = new Set([ diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/common/__tests__/settings.test.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/common/__tests__/settings.test.ts index dfe3a3b904ae..5125705ff058 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/common/__tests__/settings.test.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/common/__tests__/settings.test.ts @@ -127,7 +127,7 @@ describe(normalizeTimingFunction, () => { }); describe('when invalid function is passed', () => { - it.each(['invalid', 'ease-in', 'ease-out', ''])( + it.each(['invalid', 'easeIn', 'easeOut', ''])( 'throws an error for %p', (timingFunction) => { const value = timingFunction as PredefinedTimingFunction; @@ -150,7 +150,7 @@ describe(normalizeTimingFunction, () => { linear([0.6, '0%'], [0.1, '50%'], [1, '100%']), steps(4, 'start'), steps(2, 'end'), - steps(5, 'jumpNone'), + steps(5, 'jump-none'), ])('returns normalized value for %p', (timingFunction) => { expect(normalizeTimingFunction(timingFunction)).toEqual( timingFunction.normalize() diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/common/settings.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/common/settings.ts index 73117e9274b1..6b839d9f0252 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/common/settings.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/common/settings.ts @@ -12,11 +12,11 @@ export const VALID_PREDEFINED_TIMING_FUNCTIONS = new Set([ 'linear', 'ease', - 'easeIn', - 'easeOut', - 'easeInOut', - 'stepStart', - 'stepEnd', + 'ease-in', + 'ease-out', + 'ease-in-out', + 'step-start', + 'step-end', ]); export const ERROR_MESSAGES = { diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/config.test.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/config.test.ts index 652c4d90ac11..7b52f1786d68 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/config.test.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/config.test.ts @@ -24,7 +24,7 @@ describe(normalizeCSSTransitionProperties, () => { transitionDuration: '1.5s', transitionTimingFunction: cubicBezier(0.4, 0, 0.2, 1), transitionDelay: '300ms', - transitionBehavior: 'allowDiscrete', + transitionBehavior: 'allow-discrete', }; expect(normalizeCSSTransitionProperties(config)).toEqual({ @@ -101,7 +101,7 @@ describe(normalizeCSSTransitionProperties, () => { const config: CSSTransitionProperties = { transitionProperty: ['opacity', 'transform'], transitionDuration: ['1.5s', '2s'], - transitionTimingFunction: ['easeIn', cubicBezier(0.4, 0, 0.2, 1)], + transitionTimingFunction: ['ease-in', cubicBezier(0.4, 0, 0.2, 1)], transitionDelay: ['300ms', '500ms'], }; @@ -111,7 +111,7 @@ describe(normalizeCSSTransitionProperties, () => { settings: { opacity: { duration: 1500, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 300, }, transform: { @@ -127,7 +127,7 @@ describe(normalizeCSSTransitionProperties, () => { const config: CSSTransitionProperties = { transitionProperty: ['opacity', 'width'], transitionDuration: '1.5s', - transitionTimingFunction: 'easeIn', + transitionTimingFunction: 'ease-in', transitionDelay: ['300ms', '300ms'], }; @@ -137,12 +137,12 @@ describe(normalizeCSSTransitionProperties, () => { settings: { opacity: { duration: 1500, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 300, }, width: { duration: 1500, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 300, }, }, @@ -153,7 +153,7 @@ describe(normalizeCSSTransitionProperties, () => { const config: CSSTransitionProperties = { transitionProperty: ['width', 'opacity', 'transform'], transitionDuration: ['1.5s', '2s'], - transitionTimingFunction: 'easeIn', + transitionTimingFunction: 'ease-in', transitionDelay: ['300ms', '500ms'], }; @@ -163,17 +163,17 @@ describe(normalizeCSSTransitionProperties, () => { settings: { width: { duration: 1500, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 300, }, opacity: { duration: 2000, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 500, }, transform: { duration: 1500, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 300, }, }, @@ -184,7 +184,7 @@ describe(normalizeCSSTransitionProperties, () => { const config: CSSTransitionProperties = { transitionProperty: ['opacity', 'opacity'], transitionDuration: ['1.5s', '2s'], - transitionTimingFunction: ['easeIn', cubicBezier(0.4, 0, 0.2, 1)], + transitionTimingFunction: ['ease-in', cubicBezier(0.4, 0, 0.2, 1)], transitionDelay: '300ms', }; @@ -205,7 +205,7 @@ describe(normalizeCSSTransitionProperties, () => { const config: CSSTransitionProperties = { transitionProperty: ['all', 'opacity'], transitionDuration: ['1.5s', '2s'], - transitionTimingFunction: ['easeIn', cubicBezier(0.4, 0, 0.2, 1)], + transitionTimingFunction: ['ease-in', cubicBezier(0.4, 0, 0.2, 1)], transitionDelay: ['300ms', '500ms'], }; @@ -215,7 +215,7 @@ describe(normalizeCSSTransitionProperties, () => { settings: { all: { duration: 1500, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 300, }, opacity: { @@ -231,7 +231,7 @@ describe(normalizeCSSTransitionProperties, () => { const config: CSSTransitionProperties = { transitionProperty: ['opacity', 'none'] as CSSTransitionProperty, transitionDuration: ['1.5s', '2s'], - transitionTimingFunction: ['easeIn', cubicBezier(0.4, 0, 0.2, 1)], + transitionTimingFunction: ['ease-in', cubicBezier(0.4, 0, 0.2, 1)], transitionDelay: ['300ms', '500ms'], }; @@ -346,7 +346,7 @@ describe(getNormalizedCSSTransitionConfigUpdates, () => { settings: { all: { duration: 1500, - timingFunction: 'easeIn', // changed + timingFunction: 'ease-in', // changed delay: 300, }, }, @@ -359,7 +359,7 @@ describe(getNormalizedCSSTransitionConfigUpdates, () => { settings: { all: { duration: 1500, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 300, }, }, @@ -408,12 +408,12 @@ describe(getNormalizedCSSTransitionConfigUpdates, () => { }, transform: { duration: 2000, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 500, }, width: { duration: 1000, - timingFunction: 'easeOut', + timingFunction: 'ease-out', delay: 200, }, }, @@ -429,7 +429,7 @@ describe(getNormalizedCSSTransitionConfigUpdates, () => { }, transform: { duration: 2000, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 500, }, width: { @@ -454,7 +454,7 @@ describe(getNormalizedCSSTransitionConfigUpdates, () => { }, transform: { duration: 2000, - timingFunction: 'easeIn', + timingFunction: 'ease-in', delay: 500, }, width: { diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/settings.test.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/settings.test.ts index 1702522e570f..34a1e82f615e 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/settings.test.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/__tests__/settings.test.ts @@ -5,7 +5,7 @@ import type { CSSTransitionBehavior } from '../../../../../types'; describe(normalizeTransitionBehavior, () => { it('returns true if the behavior is "allowDiscrete"', () => { - expect(normalizeTransitionBehavior('allowDiscrete')).toBe(true); + expect(normalizeTransitionBehavior('allow-discrete')).toBe(true); }); it('returns false if the behavior is not "allowDiscrete"', () => { diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/constants.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/constants.ts index a2b632e19ca8..d7f2370144e7 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/constants.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/constants.ts @@ -3,5 +3,5 @@ import type { CSSTransitionBehavior } from '../../../../types'; export const VALID_TRANSITION_BEHAVIORS: CSSTransitionBehavior[] = [ 'normal', - 'allowDiscrete', + 'allow-discrete', ]; diff --git a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/settings.ts b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/settings.ts index a5c56a1096f2..307ec4e79581 100644 --- a/packages/react-native-reanimated/src/css/platform/native/normalization/transition/settings.ts +++ b/packages/react-native-reanimated/src/css/platform/native/normalization/transition/settings.ts @@ -16,5 +16,5 @@ export function normalizeTransitionBehavior( ERROR_MESSAGES.invalidTransitionBehavior(behavior) ); } - return behavior === 'allowDiscrete'; + return behavior === 'allow-discrete'; } diff --git a/packages/react-native-reanimated/src/css/types/animation.ts b/packages/react-native-reanimated/src/css/types/animation.ts index 230bec48f0e7..5e42e4e2d29a 100644 --- a/packages/react-native-reanimated/src/css/types/animation.ts +++ b/packages/react-native-reanimated/src/css/types/animation.ts @@ -34,7 +34,7 @@ export type CSSAnimationDirection = | 'normal' | 'reverse' | 'alternate' - | 'alternateReverse'; + | 'alternate-reverse'; export type CSSAnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both'; export type CSSAnimationPlayState = 'running' | 'paused'; diff --git a/packages/react-native-reanimated/src/css/types/transition.ts b/packages/react-native-reanimated/src/css/types/transition.ts index 7430c32f7c49..51abb736a222 100644 --- a/packages/react-native-reanimated/src/css/types/transition.ts +++ b/packages/react-native-reanimated/src/css/types/transition.ts @@ -11,7 +11,7 @@ export type CSSTransitionProperty = export type CSSTransitionDuration = TimeUnit; export type CSSTransitionTimingFunction = CSSTimingFunction; export type CSSTransitionDelay = TimeUnit; -export type CSSTransitionBehavior = 'normal' | 'allowDiscrete'; +export type CSSTransitionBehavior = 'normal' | 'allow-discrete'; type SingleCSSTransitionSettings = { transitionDuration?: CSSTransitionDuration; diff --git a/packages/react-native-reanimated/src/css/utils/__tests__/props.test.ts b/packages/react-native-reanimated/src/css/utils/__tests__/props.test.ts index 92a1efdcd75f..db09560c467d 100644 --- a/packages/react-native-reanimated/src/css/utils/__tests__/props.test.ts +++ b/packages/react-native-reanimated/src/css/utils/__tests__/props.test.ts @@ -60,7 +60,7 @@ describe(filterCSSAndStyleProperties, () => { describe('animation settings', () => { it.each([ ['animationDuration', '2s'], - ['animationTimingFunction', 'easeInOut'], + ['animationTimingFunction', 'ease-in-out'], ['animationDelay', '1s'], ['animationIterationCount', 5], ['animationDirection', 'reverse'], @@ -117,7 +117,7 @@ describe(filterCSSAndStyleProperties, () => { it.each([ ['transitionProperty', 'opacity'], ['transitionDuration', '2s'], - ['transitionTimingFunction', 'easeInOut'], + ['transitionTimingFunction', 'ease-in-out'], ['transitionDelay', '1s'], ])(`returns %p setting`, (key, value) => { const style: CSSStyle = {