react-native-reanimated 3.13.0-rc.2 → 3.13.0

package/src/layoutReanimation/web/animationsManager.ts

@@ -1,20 +1,28 @@
 'use strict';
 
-import type { AnimationConfig, AnimationNames, CustomConfig } from './config';
+import type {
+  AnimationConfig,
+  AnimationNames,
+  CustomConfig,
+  KeyframeDefinitions,
+} from './config';
 import { Animations } from './config';
 import type {
   AnimatedComponentProps,
   LayoutAnimationStaticContext,
 } from '../../createAnimatedComponent/commonTypes';
 import { LayoutAnimationType } from '../animationBuilder/commonTypes';
+import { createCustomKeyFrameAnimation } from './createAnimation';
 import {
   getProcessedConfig,
   handleExitingAnimation,
   handleLayoutTransition,
+  maybeModifyStyleForKeyframe,
   setElementAnimation,
 } from './componentUtils';
 import { areDOMRectsEqual } from './domUtils';
 import type { TransitionData } from './animationParser';
+import { Keyframe } from '../animationBuilder';
 import { makeElementVisible } from './componentStyle';
 
 function chooseConfig<ComponentProps extends Record<string, unknown>>(
@@ -35,11 +43,11 @@ function chooseConfig<ComponentProps extends Record<string, unknown>>(
 
 function checkUndefinedAnimationFail(
   initialAnimationName: string,
-  isLayoutTransition: boolean
+  needsCustomization: boolean
 ) {
   // This prevents crashes if we try to set animations that are not defined.
-  // We don't care about layout transitions since they're created dynamically
-  if (initialAnimationName in Animations || isLayoutTransition) {
+  // We don't care about layout transitions or custom keyframes since they're created dynamically
+  if (initialAnimationName in Animations || needsCustomization) {
     return false;
   }
 
@@ -86,7 +94,7 @@ function chooseAction(
 ) {
   switch (animationType) {
     case LayoutAnimationType.ENTERING:
-      setElementAnimation(element, animationConfig);
+      setElementAnimation(element, animationConfig, true);
       break;
     case LayoutAnimationType.LAYOUT:
       transitionData.reversed = animationConfig.reversed;
@@ -111,25 +119,48 @@ function tryGetAnimationConfig<ComponentProps extends Record<string, unknown>>(
     typeof config.constructor;
 
   const isLayoutTransition = animationType === LayoutAnimationType.LAYOUT;
-  const animationName =
-    typeof config === 'function'
-      ? config.presetName
-      : (config.constructor as ConstructorWithStaticContext).presetName;
+  const isCustomKeyframe = config instanceof Keyframe;
+
+  let animationName;
+
+  if (isCustomKeyframe) {
+    animationName = createCustomKeyFrameAnimation(
+      (config as CustomConfig).definitions as KeyframeDefinitions
+    );
+  } else if (typeof config === 'function') {
+    animationName = config.presetName;
+  } else {
+    animationName = (config.constructor as ConstructorWithStaticContext)
+      .presetName;
+  }
 
   const shouldFail = checkUndefinedAnimationFail(
     animationName,
-    isLayoutTransition
+    isLayoutTransition || isCustomKeyframe
   );
 
   if (shouldFail) {
     return null;
   }
 
+  if (isCustomKeyframe) {
+    const keyframeTimestamps = Object.keys(
+      (config as CustomConfig).definitions as KeyframeDefinitions
+    );
+
+    if (
+      !(keyframeTimestamps.includes('100') || keyframeTimestamps.includes('to'))
+    ) {
+      console.warn(
+        `[Reanimated] Neither '100' nor 'to' was specified in Keyframe definition. This may result in wrong final position of your component. One possible solution is to duplicate last timestamp in definition as '100' (or 'to')`
+      );
+    }
+  }
+
   const animationConfig = getProcessedConfig(
     animationName,
     animationType,
-    config as CustomConfig,
-    animationName as AnimationNames
+    config as CustomConfig
   );
 
   return animationConfig;
@@ -145,6 +176,8 @@ export function startWebLayoutAnimation<
 ) {
   const animationConfig = tryGetAnimationConfig(props, animationType);
 
+  maybeModifyStyleForKeyframe(element, props.entering as CustomConfig);
+
   if ((animationConfig?.animationName as AnimationNames) in Animations) {
     maybeReportOverwrittenProperties(
       Animations[animationConfig?.animationName as AnimationNames].style,

package/src/layoutReanimation/web/componentStyle.ts

@@ -20,15 +20,12 @@ export const snapshots = new WeakMap<HTMLElement, ReanimatedSnapshot>();
 
 export function makeElementVisible(element: HTMLElement, delay: number) {
   if (delay === 0) {
-    _updatePropsJS(
-      { visibility: 'initial' },
-      { _component: element as ReanimatedHTMLElement }
-    );
+    _updatePropsJS({ visibility: 'initial' }, element as ReanimatedHTMLElement);
   } else {
     setTimeout(() => {
       _updatePropsJS(
         { visibility: 'initial' },
-        { _component: element as ReanimatedHTMLElement }
+        element as ReanimatedHTMLElement
       );
     }, delay * 1000);
   }
@@ -66,19 +63,19 @@ function fixElementPosition(
   }
 }
 
-export function setDummyPosition(
-  dummy: HTMLElement,
+export function setElementPosition(
+  element: HTMLElement,
   snapshot: ReanimatedSnapshot
 ) {
-  dummy.style.transform = '';
-  dummy.style.position = 'absolute';
-  dummy.style.top = `${snapshot.top}px`;
-  dummy.style.left = `${snapshot.left}px`;
-  dummy.style.width = `${snapshot.width}px`;
-  dummy.style.height = `${snapshot.height}px`;
-  dummy.style.margin = '0px'; // tmpElement has absolute position, so margin is not necessary
+  element.style.transform = '';
+  element.style.position = 'absolute';
+  element.style.top = `${snapshot.top}px`;
+  element.style.left = `${snapshot.left}px`;
+  element.style.width = `${snapshot.width}px`;
+  element.style.height = `${snapshot.height}px`;
+  element.style.margin = '0px'; // tmpElement has absolute position, so margin is not necessary
 
-  if (dummy.parentElement) {
-    fixElementPosition(dummy, dummy.parentElement, snapshot);
+  if (element.parentElement) {
+    fixElementPosition(element, element.parentElement, snapshot);
   }
 }

package/src/layoutReanimation/web/componentUtils.ts

@@ -1,13 +1,15 @@
 'use strict';
 
-import { Animations, TransitionType, WebEasings } from './config';
+import { Animations, TransitionType } from './config';
 import type {
   AnimationCallback,
   AnimationConfig,
   AnimationNames,
   CustomConfig,
-  WebEasingsNames,
+  KeyframeDefinitions,
 } from './config';
+import { WebEasings } from './Easing.web';
+import type { WebEasingsNames } from './Easing.web';
 import type { TransitionData } from './animationParser';
 import { TransitionGenerator } from './createAnimation';
 import { scheduleAnimationCleanup } from './domUtils';
@@ -17,7 +19,8 @@ import { ReduceMotion } from '../../commonTypes';
 import { isReducedMotion } from '../../PlatformChecker';
 import { LayoutAnimationType } from '../animationBuilder/commonTypes';
 import type { ReanimatedSnapshot, ScrollOffsets } from './componentStyle';
-import { setDummyPosition, snapshots } from './componentStyle';
+import { setElementPosition, snapshots } from './componentStyle';
+import { Keyframe } from '../animationBuilder';
 
 function getEasingFromConfig(config: CustomConfig): string {
   const easingName =
@@ -63,12 +66,15 @@ export function getReducedMotionFromConfig(config: CustomConfig) {
 
 function getDurationFromConfig(
   config: CustomConfig,
-  isLayoutTransition: boolean,
-  animationName: AnimationNames
+  animationName: string
 ): number {
-  const defaultDuration = isLayoutTransition
-    ? 0.3
-    : Animations[animationName].duration;
+  // Duration in keyframe has to be in seconds. However, when using `.duration()` modifier we pass it in miliseconds.
+  // If `duration` was specified in config, we have to divide it by `1000`, otherwise we return value that is already in seconds.
+
+  const defaultDuration =
+    animationName in Animations
+      ? Animations[animationName as AnimationNames].duration
+      : 0.3;
 
   return config.durationV !== undefined
     ? config.durationV / 1000
@@ -86,17 +92,12 @@ function getReversedFromConfig(config: CustomConfig) {
 export function getProcessedConfig(
   animationName: string,
   animationType: LayoutAnimationType,
-  config: CustomConfig,
-  initialAnimationName: AnimationNames
+  config: CustomConfig
 ): AnimationConfig {
   return {
     animationName,
     animationType,
-    duration: getDurationFromConfig(
-      config,
-      animationType === LayoutAnimationType.LAYOUT,
-      initialAnimationName
-    ),
+    duration: getDurationFromConfig(config, animationName),
     delay: getDelayFromConfig(config),
     easing: getEasingFromConfig(config),
     callback: getCallbackFromConfig(config),
@@ -104,6 +105,28 @@ export function getProcessedConfig(
   };
 }
 
+export function maybeModifyStyleForKeyframe(
+  element: HTMLElement,
+  config: CustomConfig
+) {
+  if (!(config instanceof Keyframe)) {
+    return;
+  }
+
+  // We need to set `animationFillMode` to `forwards`, otherwise component will go back to its position.
+  // This will result in wrong snapshot
+  element.style.animationFillMode = 'forwards';
+
+  for (const timestampRules of Object.values(
+    config.definitions as KeyframeDefinitions
+  )) {
+    if ('originX' in timestampRules || 'originY' in timestampRules) {
+      element.style.position = 'absolute';
+      return;
+    }
+  }
+}
+
 export function saveSnapshot(element: HTMLElement) {
   const rect = element.getBoundingClientRect();
 
@@ -120,16 +143,31 @@ export function saveSnapshot(element: HTMLElement) {
 
 export function setElementAnimation(
   element: HTMLElement,
-  animationConfig: AnimationConfig
+  animationConfig: AnimationConfig,
+  shouldSavePosition = false
 ) {
   const { animationName, duration, delay, easing } = animationConfig;
 
-  element.style.animationName = animationName;
-  element.style.animationDuration = `${duration}s`;
-  element.style.animationDelay = `${delay}s`;
-  element.style.animationTimingFunction = easing;
+  const configureAnimation = () => {
+    element.style.animationName = animationName;
+    element.style.animationDuration = `${duration}s`;
+    element.style.animationDelay = `${delay}s`;
+    element.style.animationTimingFunction = easing;
+  };
+
+  if (animationConfig.animationType === LayoutAnimationType.ENTERING) {
+    // On chrome sometimes entering animations flicker. This is most likely caused by animation being interrupted
+    // by already started tasks. To avoid flickering, we use `requestAnimationFrame`, which will run callback right before repaint.
+    requestAnimationFrame(configureAnimation);
+  } else {
+    configureAnimation();
+  }
 
   element.onanimationend = () => {
+    if (shouldSavePosition) {
+      saveSnapshot(element);
+    }
+
     animationConfig.callback?.(true);
     element.removeEventListener('animationcancel', animationCancelHandler);
   };
@@ -144,7 +182,7 @@ export function setElementAnimation(
     if (animationConfig.animationType === LayoutAnimationType.ENTERING) {
       _updatePropsJS(
         { visibility: 'initial' },
-        { _component: element as ReanimatedHTMLElement }
+        element as ReanimatedHTMLElement
       );
     }
 
@@ -152,7 +190,11 @@ export function setElementAnimation(
   };
 
   if (!(animationName in Animations)) {
-    scheduleAnimationCleanup(animationName, duration + delay);
+    scheduleAnimationCleanup(animationName, duration + delay, () => {
+      if (shouldSavePosition) {
+        setElementPosition(element, snapshots.get(element)!);
+      }
+    });
   }
 }
 
@@ -175,6 +217,9 @@ export function handleLayoutTransition(
     case 'FadingTransition':
       animationType = TransitionType.FADING;
       break;
+    case 'JumpingTransition':
+      animationType = TransitionType.JUMPING;
+      break;
     default:
       animationType = TransitionType.LINEAR;
       break;
@@ -220,8 +265,6 @@ export function handleExitingAnimation(
   dummy.reanimatedDummy = true;
 
   element.style.animationName = '';
-  // We hide current element so only its copy with proper animation will be displayed
-  element.style.visibility = 'hidden';
 
   // After cloning the element, we want to move all children from original element to its clone. This is because original element
   // will be unmounted, therefore when this code executes in child component, parent will be either empty or removed soon.
@@ -260,7 +303,7 @@ export function handleExitingAnimation(
 
   snapshots.set(dummy, snapshot);
 
-  setDummyPosition(dummy, snapshot);
+  setElementPosition(dummy, snapshot);
 
   const originalOnAnimationEnd = dummy.onanimationend;
 

package/src/layoutReanimation/web/config.ts

@@ -37,10 +37,12 @@ import {
 } from './animation/Stretch.web';
 import { ZoomIn, ZoomInData, ZoomOut, ZoomOutData } from './animation/Zoom.web';
 
-import type { AnimationData } from './animationParser';
+import type { AnimationData, AnimationStyle } from './animationParser';
 
 export type AnimationCallback = ((finished: boolean) => void) | null;
 
+export type KeyframeDefinitions = Record<number, AnimationStyle>;
+
 export interface AnimationConfig {
   animationName: string;
   animationType: LayoutAnimationType;
@@ -59,12 +61,14 @@ export interface CustomConfig {
   reduceMotionV?: ReduceMotion;
   callbackV?: AnimationCallback;
   reversed?: boolean;
+  definitions?: KeyframeDefinitions;
 }
 
 export enum TransitionType {
   LINEAR,
   SEQUENCED,
   FADING,
+  JUMPING,
 }
 
 export const AnimationsData: Record<string, AnimationData> = {
@@ -111,18 +115,5 @@ export const Animations = {
   ...RollOut,
 };
 
-// Those are the easings that can be implemented using Bezier curves.
-// Others should be done as CSS animations
-export const WebEasings = {
-  linear: [0, 0, 1, 1],
-  ease: [0.42, 0, 1, 1],
-  quad: [0.11, 0, 0.5, 0],
-  cubic: [0.32, 0, 0.67, 0],
-  sin: [0.12, 0, 0.39, 0],
-  circle: [0.55, 0, 1, 0.45],
-  exp: [0.7, 0, 0.84, 0],
-};
-
 export type AnimationNames = keyof typeof Animations;
 export type LayoutTransitionsNames = keyof typeof AnimationsData;
-export type WebEasingsNames = keyof typeof WebEasings;

package/src/layoutReanimation/web/createAnimation.ts

@@ -1,8 +1,10 @@
 'use strict';
 
 import { TransitionType } from './config';
+import type { KeyframeDefinitions } from './config';
 import { convertAnimationObjectToKeyframes } from './animationParser';
 import type {
+  AnimationData,
   ReanimatedWebTransformProperties,
   TransitionData,
 } from './animationParser';
@@ -10,16 +12,17 @@ import type { TransformsStyle } from 'react-native';
 import { LinearTransition } from './transition/Linear.web';
 import { SequencedTransition } from './transition/Sequenced.web';
 import { FadingTransition } from './transition/Fading.web';
+import { JumpingTransition } from './transition/Jumping.web';
 import { insertWebAnimation } from './domUtils';
 
+type TransformType = NonNullable<TransformsStyle['transform']>;
+
 // Translate values are passed as numbers. However, if `translate` property receives number, it will not automatically
 // convert it to `px`. Therefore if we want to keep transform we have to add 'px' suffix to each of translate values
 // that are present inside transform.
 //
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function addPxToTranslate(
-  transform: NonNullable<TransformsStyle['transform']>
-) {
+function addPxToTranslate(transform: TransformType) {
   type RNTransformProp = (typeof transform)[number];
 
   // @ts-ignore `existingTransform` cannot be string because in that case
@@ -27,7 +30,7 @@ function addPxToTranslate(
   const newTransform = transform.map((transformProp: RNTransformProp) => {
     const newTransformProp: ReanimatedWebTransformProperties = {};
     for (const [key, value] of Object.entries(transformProp)) {
-      if (key.includes('translate')) {
+      if (key.includes('translate') && typeof value === 'number') {
         // @ts-ignore After many trials we decided to ignore this error - it says that we cannot use 'key' to index this object.
         // Sadly it doesn't go away after using cast `key as keyof TransformProperties`.
         newTransformProp[key] = `${value}px`;
@@ -42,6 +45,30 @@ function addPxToTranslate(
   return newTransform;
 }
 
+export function createCustomKeyFrameAnimation(
+  keyframeDefinitions: KeyframeDefinitions
+) {
+  for (const value of Object.values(keyframeDefinitions)) {
+    if (value.transform) {
+      value.transform = addPxToTranslate(value.transform as TransformType);
+    }
+  }
+
+  const animationData: AnimationData = {
+    name: '',
+    style: keyframeDefinitions,
+    duration: -1,
+  };
+
+  animationData.name = generateNextCustomKeyframeName();
+
+  const parsedKeyframe = convertAnimationObjectToKeyframes(animationData);
+
+  insertWebAnimation(animationData.name, parsedKeyframe);
+
+  return animationData.name;
+}
+
 let customKeyframeCounter = 0;
 
 function generateNextCustomKeyframeName() {
@@ -81,6 +108,13 @@ export function TransitionGenerator(
         transitionData
       );
       break;
+
+    case TransitionType.JUMPING:
+      transitionObject = JumpingTransition(
+        transitionKeyframeName,
+        transitionData
+      );
+      break;
   }
 
   const transitionKeyframe =

package/src/layoutReanimation/web/domUtils.ts

@@ -2,7 +2,7 @@
 
 import type { ReanimatedHTMLElement } from '../../js-reanimated';
 import { isWindowAvailable } from '../../PlatformChecker';
-import { setDummyPosition, snapshots } from './componentStyle';
+import { setElementPosition, snapshots } from './componentStyle';
 import { Animations } from './config';
 import type { AnimationNames } from './config';
 
@@ -85,7 +85,10 @@ export function insertWebAnimation(animationName: string, keyframe: string) {
   }
 }
 
-function removeWebAnimation(animationName: string) {
+function removeWebAnimation(
+  animationName: string,
+  animationRemoveCallback: () => void
+) {
   // Without this check SSR crashes because document is undefined (NextExample on CI)
   if (!isWindowAvailable()) {
     return;
@@ -101,7 +104,10 @@ function removeWebAnimation(animationName: string) {
     throw new Error('[Reanimated] Failed to obtain animation index.');
   }
 
+  animationRemoveCallback();
+
   styleTag.sheet?.deleteRule(currentAnimationIndex);
+
   animationNameList.splice(currentAnimationIndex, 1);
   animationNameToIndex.delete(animationName);
 
@@ -123,7 +129,8 @@ const minimumFrames = 10;
 
 export function scheduleAnimationCleanup(
   animationName: string,
-  animationDuration: number
+  animationDuration: number,
+  animationRemoveCallback: () => void
 ) {
   // If duration is very short, we want to keep remove delay to at least 10 frames
   // In our case it is exactly 160/1099 s, which is approximately 0.15s
@@ -132,7 +139,10 @@ export function scheduleAnimationCleanup(
     animationDuration + frameDurationMs * minimumFrames
   );
 
-  setTimeout(() => removeWebAnimation(animationName), timeoutValue);
+  setTimeout(
+    () => removeWebAnimation(animationName, animationRemoveCallback),
+    timeoutValue
+  );
 }
 
 function reattachElementToAncestor(child: ReanimatedHTMLElement, parent: Node) {
@@ -147,7 +157,7 @@ function reattachElementToAncestor(child: ReanimatedHTMLElement, parent: Node) {
   child.removedAfterAnimation = true;
   parent.appendChild(child);
 
-  setDummyPosition(child, childSnapshot);
+  setElementPosition(child, childSnapshot);
 
   const originalOnAnimationEnd = child.onanimationend;
 

package/src/layoutReanimation/web/transition/Jumping.web.ts

@@ -0,0 +1,44 @@
+'use strict';
+import type { TransitionData } from '../animationParser';
+import { Easing } from '../../../Easing';
+
+export function JumpingTransition(
+  name: string,
+  transitionData: TransitionData
+) {
+  const { translateX, translateY, scaleX, scaleY } = transitionData;
+
+  const d = Math.max(Math.abs(translateX), Math.abs(translateY)) / 2;
+  const peakTranslateY = translateY <= 0 ? translateY - d : -translateY + d;
+
+  const jumpingTransition = {
+    name,
+    style: {
+      0: {
+        transform: [
+          {
+            translateX: `${translateX}px`,
+            translateY: `${translateY}px`,
+            scale: `${scaleX},${scaleY}`,
+          },
+        ],
+        easing: Easing.exp,
+      },
+      50: {
+        transform: [
+          {
+            translateX: `${translateX / 2}px`,
+            translateY: `${peakTranslateY}px`,
+            scale: `${scaleX},${scaleY}`,
+          },
+        ],
+      },
+      100: {
+        transform: [{ translateX: '0px', translateY: '0px', scale: '1,1' }],
+      },
+    },
+    duration: 300,
+  };
+
+  return jumpingTransition;
+}

package/src/platform-specific/RNRenderer.web.ts

@@ -1,3 +1,3 @@
 'use strict';
 // RNRender is not used for web. An export is still defined to eliminate warnings from bundlers such as esbuild.
-module.exports = null;
+export {};

package/src/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * with the version used to build the native part of the library in runtime.
  * Remember to keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '3.13.0-rc.2';
+export const jsVersion = '3.13.0';

package/src/platformFunctions/setNativeProps.web.ts

@@ -10,5 +10,5 @@ export function setNativeProps<T extends Component>(
   updates: StyleProps
 ) {
   const component = animatedRef() as ReanimatedHTMLElement;
-  _updatePropsJS(updates, { _component: component });
+  _updatePropsJS(updates, component);
 }