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

package/lib/module/layoutReanimation/web/animationsManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animations","LayoutAnimationType","getProcessedConfig","handleExitingAnimation","handleLayoutTransition","setElementAnimation","areDOMRectsEqual","makeElementVisible","chooseConfig","animationType","props","config","ENTERING","entering","EXITING","exiting","LAYOUT","layout","checkUndefinedAnimationFail","initialAnimationName","isLayoutTransition","console","warn","maybeReportOverwrittenProperties","keyframe","styles","propertyRegex","animationProperties","Set","match","matchAll","add","commonProperties","Array","from","filter","style","has","length","join","chooseAction","animationConfig","element","transitionData","reversed","tryGetAnimationConfig","animationName","presetName","constructor","shouldFail","startWebLayoutAnimation","tryActivateLayoutTransition","snapshot","rect","getBoundingClientRect","translateX","x","translateY","y","scaleX","width","scaleY","height"],"sources":["animationsManager.ts"],"sourcesContent":["'use strict';\n\nimport type { AnimationConfig, AnimationNames, CustomConfig } from './config';\nimport { Animations } from './config';\nimport type {\n  AnimatedComponentProps,\n  LayoutAnimationStaticContext,\n} from '../../createAnimatedComponent/commonTypes';\nimport { LayoutAnimationType } from '../animationBuilder/commonTypes';\nimport {\n  getProcessedConfig,\n  handleExitingAnimation,\n  handleLayoutTransition,\n  setElementAnimation,\n} from './componentUtils';\nimport { areDOMRectsEqual } from './domUtils';\nimport type { TransitionData } from './animationParser';\nimport { makeElementVisible } from './componentStyle';\n\nfunction chooseConfig<ComponentProps extends Record<string, unknown>>(\n  animationType: LayoutAnimationType,\n  props: Readonly<AnimatedComponentProps<ComponentProps>>\n) {\n  const config =\n    animationType === LayoutAnimationType.ENTERING\n      ? props.entering\n      : animationType === LayoutAnimationType.EXITING\n      ? props.exiting\n      : animationType === LayoutAnimationType.LAYOUT\n      ? props.layout\n      : null;\n\n  return config;\n}\n\nfunction checkUndefinedAnimationFail(\n  initialAnimationName: string,\n  isLayoutTransition: boolean\n) {\n  // This prevents crashes if we try to set animations that are not defined.\n  // We don't care about layout transitions since they're created dynamically\n  if (initialAnimationName in Animations || isLayoutTransition) {\n    return false;\n  }\n\n  console.warn(\n    \"[Reanimated] Couldn't load entering/exiting animation. Current version supports only predefined animations with modifiers: duration, delay, easing, randomizeDelay, withCallback, reducedMotion.\"\n  );\n\n  return true;\n}\n\nfunction maybeReportOverwrittenProperties(\n  keyframe: string,\n  styles: CSSStyleDeclaration\n) {\n  const propertyRegex = /([a-zA-Z-]+)(?=:)/g;\n  const animationProperties = new Set();\n\n  for (const match of keyframe.matchAll(propertyRegex)) {\n    animationProperties.add(match[1]);\n  }\n\n  const commonProperties = Array.from(styles).filter((style) =>\n    animationProperties.has(style)\n  );\n\n  if (commonProperties.length === 0) {\n    return;\n  }\n\n  console.warn(\n    `[Reanimated] ${\n      commonProperties.length === 1 ? 'Property' : 'Properties'\n    } [${commonProperties.join(\n      ', '\n    )}] may be overwritten by a layout animation. Please wrap your component with an animated view and apply the layout animation on the wrapper.`\n  );\n}\n\nfunction chooseAction(\n  animationType: LayoutAnimationType,\n  animationConfig: AnimationConfig,\n  element: HTMLElement,\n  transitionData: TransitionData\n) {\n  switch (animationType) {\n    case LayoutAnimationType.ENTERING:\n      setElementAnimation(element, animationConfig);\n      break;\n    case LayoutAnimationType.LAYOUT:\n      transitionData.reversed = animationConfig.reversed;\n      handleLayoutTransition(element, animationConfig, transitionData);\n      break;\n    case LayoutAnimationType.EXITING:\n      handleExitingAnimation(element, animationConfig);\n      break;\n  }\n}\n\nfunction tryGetAnimationConfig<ComponentProps extends Record<string, unknown>>(\n  props: Readonly<AnimatedComponentProps<ComponentProps>>,\n  animationType: LayoutAnimationType\n) {\n  const config = chooseConfig(animationType, props);\n  if (!config) {\n    return null;\n  }\n\n  type ConstructorWithStaticContext = LayoutAnimationStaticContext &\n    typeof config.constructor;\n\n  const isLayoutTransition = animationType === LayoutAnimationType.LAYOUT;\n  const animationName =\n    typeof config === 'function'\n      ? config.presetName\n      : (config.constructor as ConstructorWithStaticContext).presetName;\n\n  const shouldFail = checkUndefinedAnimationFail(\n    animationName,\n    isLayoutTransition\n  );\n\n  if (shouldFail) {\n    return null;\n  }\n\n  const animationConfig = getProcessedConfig(\n    animationName,\n    animationType,\n    config as CustomConfig,\n    animationName as AnimationNames\n  );\n\n  return animationConfig;\n}\n\nexport function startWebLayoutAnimation<\n  ComponentProps extends Record<string, unknown>\n>(\n  props: Readonly<AnimatedComponentProps<ComponentProps>>,\n  element: HTMLElement,\n  animationType: LayoutAnimationType,\n  transitionData?: TransitionData\n) {\n  const animationConfig = tryGetAnimationConfig(props, animationType);\n\n  if ((animationConfig?.animationName as AnimationNames) in Animations) {\n    maybeReportOverwrittenProperties(\n      Animations[animationConfig?.animationName as AnimationNames].style,\n      element.style\n    );\n  }\n\n  if (animationConfig) {\n    chooseAction(\n      animationType,\n      animationConfig,\n      element,\n      transitionData as TransitionData\n    );\n  } else {\n    makeElementVisible(element, 0);\n  }\n}\n\nexport function tryActivateLayoutTransition<\n  ComponentProps extends Record<string, unknown>\n>(\n  props: Readonly<AnimatedComponentProps<ComponentProps>>,\n  element: HTMLElement,\n  snapshot: DOMRect\n) {\n  if (!props.layout) {\n    return;\n  }\n\n  const rect = element.getBoundingClientRect();\n\n  if (areDOMRectsEqual(rect, snapshot)) {\n    return;\n  }\n\n  const transitionData: TransitionData = {\n    translateX: snapshot.x - rect.x,\n    translateY: snapshot.y - rect.y,\n    scaleX: snapshot.width / rect.width,\n    scaleY: snapshot.height / rect.height,\n    reversed: false, // This field is used only in `SequencedTransition`, so by default it will be false\n  };\n\n  startWebLayoutAnimation(\n    props,\n    element,\n    LayoutAnimationType.LAYOUT,\n    transitionData\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Animations","LayoutAnimationType","createCustomKeyFrameAnimation","getProcessedConfig","handleExitingAnimation","handleLayoutTransition","maybeModifyStyleForKeyframe","setElementAnimation","areDOMRectsEqual","Keyframe","makeElementVisible","chooseConfig","animationType","props","config","ENTERING","entering","EXITING","exiting","LAYOUT","layout","checkUndefinedAnimationFail","initialAnimationName","needsCustomization","console","warn","maybeReportOverwrittenProperties","keyframe","styles","propertyRegex","animationProperties","Set","match","matchAll","add","commonProperties","Array","from","filter","style","has","length","join","chooseAction","animationConfig","element","transitionData","reversed","tryGetAnimationConfig","isLayoutTransition","isCustomKeyframe","animationName","definitions","presetName","constructor","shouldFail","keyframeTimestamps","Object","keys","includes","startWebLayoutAnimation","tryActivateLayoutTransition","snapshot","rect","getBoundingClientRect","translateX","x","translateY","y","scaleX","width","scaleY","height"],"sources":["animationsManager.ts"],"sourcesContent":["'use strict';\n\nimport type {\n  AnimationConfig,\n  AnimationNames,\n  CustomConfig,\n  KeyframeDefinitions,\n} from './config';\nimport { Animations } from './config';\nimport type {\n  AnimatedComponentProps,\n  LayoutAnimationStaticContext,\n} from '../../createAnimatedComponent/commonTypes';\nimport { LayoutAnimationType } from '../animationBuilder/commonTypes';\nimport { createCustomKeyFrameAnimation } from './createAnimation';\nimport {\n  getProcessedConfig,\n  handleExitingAnimation,\n  handleLayoutTransition,\n  maybeModifyStyleForKeyframe,\n  setElementAnimation,\n} from './componentUtils';\nimport { areDOMRectsEqual } from './domUtils';\nimport type { TransitionData } from './animationParser';\nimport { Keyframe } from '../animationBuilder';\nimport { makeElementVisible } from './componentStyle';\n\nfunction chooseConfig<ComponentProps extends Record<string, unknown>>(\n  animationType: LayoutAnimationType,\n  props: Readonly<AnimatedComponentProps<ComponentProps>>\n) {\n  const config =\n    animationType === LayoutAnimationType.ENTERING\n      ? props.entering\n      : animationType === LayoutAnimationType.EXITING\n      ? props.exiting\n      : animationType === LayoutAnimationType.LAYOUT\n      ? props.layout\n      : null;\n\n  return config;\n}\n\nfunction checkUndefinedAnimationFail(\n  initialAnimationName: string,\n  needsCustomization: boolean\n) {\n  // This prevents crashes if we try to set animations that are not defined.\n  // We don't care about layout transitions or custom keyframes since they're created dynamically\n  if (initialAnimationName in Animations || needsCustomization) {\n    return false;\n  }\n\n  console.warn(\n    \"[Reanimated] Couldn't load entering/exiting animation. Current version supports only predefined animations with modifiers: duration, delay, easing, randomizeDelay, withCallback, reducedMotion.\"\n  );\n\n  return true;\n}\n\nfunction maybeReportOverwrittenProperties(\n  keyframe: string,\n  styles: CSSStyleDeclaration\n) {\n  const propertyRegex = /([a-zA-Z-]+)(?=:)/g;\n  const animationProperties = new Set();\n\n  for (const match of keyframe.matchAll(propertyRegex)) {\n    animationProperties.add(match[1]);\n  }\n\n  const commonProperties = Array.from(styles).filter((style) =>\n    animationProperties.has(style)\n  );\n\n  if (commonProperties.length === 0) {\n    return;\n  }\n\n  console.warn(\n    `[Reanimated] ${\n      commonProperties.length === 1 ? 'Property' : 'Properties'\n    } [${commonProperties.join(\n      ', '\n    )}] may be overwritten by a layout animation. Please wrap your component with an animated view and apply the layout animation on the wrapper.`\n  );\n}\n\nfunction chooseAction(\n  animationType: LayoutAnimationType,\n  animationConfig: AnimationConfig,\n  element: HTMLElement,\n  transitionData: TransitionData\n) {\n  switch (animationType) {\n    case LayoutAnimationType.ENTERING:\n      setElementAnimation(element, animationConfig, true);\n      break;\n    case LayoutAnimationType.LAYOUT:\n      transitionData.reversed = animationConfig.reversed;\n      handleLayoutTransition(element, animationConfig, transitionData);\n      break;\n    case LayoutAnimationType.EXITING:\n      handleExitingAnimation(element, animationConfig);\n      break;\n  }\n}\n\nfunction tryGetAnimationConfig<ComponentProps extends Record<string, unknown>>(\n  props: Readonly<AnimatedComponentProps<ComponentProps>>,\n  animationType: LayoutAnimationType\n) {\n  const config = chooseConfig(animationType, props);\n  if (!config) {\n    return null;\n  }\n\n  type ConstructorWithStaticContext = LayoutAnimationStaticContext &\n    typeof config.constructor;\n\n  const isLayoutTransition = animationType === LayoutAnimationType.LAYOUT;\n  const isCustomKeyframe = config instanceof Keyframe;\n\n  let animationName;\n\n  if (isCustomKeyframe) {\n    animationName = createCustomKeyFrameAnimation(\n      (config as CustomConfig).definitions as KeyframeDefinitions\n    );\n  } else if (typeof config === 'function') {\n    animationName = config.presetName;\n  } else {\n    animationName = (config.constructor as ConstructorWithStaticContext)\n      .presetName;\n  }\n\n  const shouldFail = checkUndefinedAnimationFail(\n    animationName,\n    isLayoutTransition || isCustomKeyframe\n  );\n\n  if (shouldFail) {\n    return null;\n  }\n\n  if (isCustomKeyframe) {\n    const keyframeTimestamps = Object.keys(\n      (config as CustomConfig).definitions as KeyframeDefinitions\n    );\n\n    if (\n      !(keyframeTimestamps.includes('100') || keyframeTimestamps.includes('to'))\n    ) {\n      console.warn(\n        `[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')`\n      );\n    }\n  }\n\n  const animationConfig = getProcessedConfig(\n    animationName,\n    animationType,\n    config as CustomConfig\n  );\n\n  return animationConfig;\n}\n\nexport function startWebLayoutAnimation<\n  ComponentProps extends Record<string, unknown>\n>(\n  props: Readonly<AnimatedComponentProps<ComponentProps>>,\n  element: HTMLElement,\n  animationType: LayoutAnimationType,\n  transitionData?: TransitionData\n) {\n  const animationConfig = tryGetAnimationConfig(props, animationType);\n\n  maybeModifyStyleForKeyframe(element, props.entering as CustomConfig);\n\n  if ((animationConfig?.animationName as AnimationNames) in Animations) {\n    maybeReportOverwrittenProperties(\n      Animations[animationConfig?.animationName as AnimationNames].style,\n      element.style\n    );\n  }\n\n  if (animationConfig) {\n    chooseAction(\n      animationType,\n      animationConfig,\n      element,\n      transitionData as TransitionData\n    );\n  } else {\n    makeElementVisible(element, 0);\n  }\n}\n\nexport function tryActivateLayoutTransition<\n  ComponentProps extends Record<string, unknown>\n>(\n  props: Readonly<AnimatedComponentProps<ComponentProps>>,\n  element: HTMLElement,\n  snapshot: DOMRect\n) {\n  if (!props.layout) {\n    return;\n  }\n\n  const rect = element.getBoundingClientRect();\n\n  if (areDOMRectsEqual(rect, snapshot)) {\n    return;\n  }\n\n  const transitionData: TransitionData = {\n    translateX: snapshot.x - rect.x,\n    translateY: snapshot.y - rect.y,\n    scaleX: snapshot.width / rect.width,\n    scaleY: snapshot.height / rect.height,\n    reversed: false, // This field is used only in `SequencedTransition`, so by default it will be false\n  };\n\n  startWebLayoutAnimation(\n    props,\n    element,\n    LayoutAnimationType.LAYOUT,\n    transitionData\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/layoutReanimation/web/componentStyle.js

@@ -6,16 +6,12 @@ export function makeElementVisible(element, delay) {
   if (delay === 0) {
     _updatePropsJS({
       visibility: 'initial'
-    }, {
-      _component: element
-    });
+    }, element);
   } else {
     setTimeout(() => {
       _updatePropsJS({
         visibility: 'initial'
-      }, {
-        _component: element
-      });
+      }, element);
     }, delay * 1000);
   }
 }
@@ -34,17 +30,17 @@ function fixElementPosition(element, parent, snapshot) {
     element.style.left = `${snapshot.left - parentRect.left - parentBorderLeftValue}px`;
   }
 }
-export function setDummyPosition(dummy, snapshot) {
-  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
+export function setElementPosition(element, snapshot) {
+  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);
   }
 }
 //# sourceMappingURL=componentStyle.js.map

package/lib/module/layoutReanimation/web/componentStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_updatePropsJS","snapshots","WeakMap","makeElementVisible","element","delay","visibility","_component","setTimeout","fixElementPosition","parent","snapshot","parentRect","getBoundingClientRect","parentBorderTopValue","parseInt","getComputedStyle","borderTopWidth","parentBorderLeftValue","borderLeftWidth","dummyRect","top","style","left","setDummyPosition","dummy","transform","position","width","height","margin","parentElement"],"sources":["componentStyle.ts"],"sourcesContent":["'use strict';\n\nimport { _updatePropsJS } from '../../js-reanimated';\nimport type { ReanimatedHTMLElement } from '../../js-reanimated';\n\nexport interface ReanimatedSnapshot {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  scrollOffsets: ScrollOffsets;\n}\n\nexport interface ScrollOffsets {\n  scrollTopOffset: number;\n  scrollLeftOffset: number;\n}\n\nexport const snapshots = new WeakMap<HTMLElement, ReanimatedSnapshot>();\n\nexport function makeElementVisible(element: HTMLElement, delay: number) {\n  if (delay === 0) {\n    _updatePropsJS(\n      { visibility: 'initial' },\n      { _component: element as ReanimatedHTMLElement }\n    );\n  } else {\n    setTimeout(() => {\n      _updatePropsJS(\n        { visibility: 'initial' },\n        { _component: element as ReanimatedHTMLElement }\n      );\n    }, delay * 1000);\n  }\n}\n\nfunction fixElementPosition(\n  element: HTMLElement,\n  parent: HTMLElement,\n  snapshot: ReanimatedSnapshot\n) {\n  const parentRect = parent.getBoundingClientRect();\n\n  const parentBorderTopValue = parseInt(\n    getComputedStyle(parent).borderTopWidth\n  );\n\n  const parentBorderLeftValue = parseInt(\n    getComputedStyle(parent).borderLeftWidth\n  );\n\n  const dummyRect = element.getBoundingClientRect();\n  // getBoundingClientRect returns DOMRect with position of the element with respect to document body.\n  // However, using position `absolute` doesn't guarantee, that the dummy will be placed relative to body element.\n  // The trick below allows us to once again get position relative to body, by comparing snapshot with new position of the dummy.\n  if (dummyRect.top !== snapshot.top) {\n    element.style.top = `${\n      snapshot.top - parentRect.top - parentBorderTopValue\n    }px`;\n  }\n\n  if (dummyRect.left !== snapshot.left) {\n    element.style.left = `${\n      snapshot.left - parentRect.left - parentBorderLeftValue\n    }px`;\n  }\n}\n\nexport function setDummyPosition(\n  dummy: HTMLElement,\n  snapshot: ReanimatedSnapshot\n) {\n  dummy.style.transform = '';\n  dummy.style.position = 'absolute';\n  dummy.style.top = `${snapshot.top}px`;\n  dummy.style.left = `${snapshot.left}px`;\n  dummy.style.width = `${snapshot.width}px`;\n  dummy.style.height = `${snapshot.height}px`;\n  dummy.style.margin = '0px'; // tmpElement has absolute position, so margin is not necessary\n\n  if (dummy.parentElement) {\n    fixElementPosition(dummy, dummy.parentElement, snapshot);\n  }\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,cAAc,QAAQ,qBAAqB;AAgBpD,OAAO,MAAMC,SAAS,GAAG,IAAIC,OAAO,CAAkC,CAAC;AAEvE,OAAO,SAASC,kBAAkBA,CAACC,OAAoB,EAAEC,KAAa,EAAE;EACtE,IAAIA,KAAK,KAAK,CAAC,EAAE;IACfL,cAAc,CACZ;MAAEM,UAAU,EAAE;IAAU,CAAC,EACzB;MAAEC,UAAU,EAAEH;IAAiC,CACjD,CAAC;EACH,CAAC,MAAM;IACLI,UAAU,CAAC,MAAM;MACfR,cAAc,CACZ;QAAEM,UAAU,EAAE;MAAU,CAAC,EACzB;QAAEC,UAAU,EAAEH;MAAiC,CACjD,CAAC;IACH,CAAC,EAAEC,KAAK,GAAG,IAAI,CAAC;EAClB;AACF;AAEA,SAASI,kBAAkBA,CACzBL,OAAoB,EACpBM,MAAmB,EACnBC,QAA4B,EAC5B;EACA,MAAMC,UAAU,GAAGF,MAAM,CAACG,qBAAqB,CAAC,CAAC;EAEjD,MAAMC,oBAAoB,GAAGC,QAAQ,CACnCC,gBAAgB,CAACN,MAAM,CAAC,CAACO,cAC3B,CAAC;EAED,MAAMC,qBAAqB,GAAGH,QAAQ,CACpCC,gBAAgB,CAACN,MAAM,CAAC,CAACS,eAC3B,CAAC;EAED,MAAMC,SAAS,GAAGhB,OAAO,CAACS,qBAAqB,CAAC,CAAC;EACjD;EACA;EACA;EACA,IAAIO,SAAS,CAACC,GAAG,KAAKV,QAAQ,CAACU,GAAG,EAAE;IAClCjB,OAAO,CAACkB,KAAK,CAACD,GAAG,GAAI,GACnBV,QAAQ,CAACU,GAAG,GAAGT,UAAU,CAACS,GAAG,GAAGP,oBACjC,IAAG;EACN;EAEA,IAAIM,SAAS,CAACG,IAAI,KAAKZ,QAAQ,CAACY,IAAI,EAAE;IACpCnB,OAAO,CAACkB,KAAK,CAACC,IAAI,GAAI,GACpBZ,QAAQ,CAACY,IAAI,GAAGX,UAAU,CAACW,IAAI,GAAGL,qBACnC,IAAG;EACN;AACF;AAEA,OAAO,SAASM,gBAAgBA,CAC9BC,KAAkB,EAClBd,QAA4B,EAC5B;EACAc,KAAK,CAACH,KAAK,CAACI,SAAS,GAAG,EAAE;EAC1BD,KAAK,CAACH,KAAK,CAACK,QAAQ,GAAG,UAAU;EACjCF,KAAK,CAACH,KAAK,CAACD,GAAG,GAAI,GAAEV,QAAQ,CAACU,GAAI,IAAG;EACrCI,KAAK,CAACH,KAAK,CAACC,IAAI,GAAI,GAAEZ,QAAQ,CAACY,IAAK,IAAG;EACvCE,KAAK,CAACH,KAAK,CAACM,KAAK,GAAI,GAAEjB,QAAQ,CAACiB,KAAM,IAAG;EACzCH,KAAK,CAACH,KAAK,CAACO,MAAM,GAAI,GAAElB,QAAQ,CAACkB,MAAO,IAAG;EAC3CJ,KAAK,CAACH,KAAK,CAACQ,MAAM,GAAG,KAAK,CAAC,CAAC;;EAE5B,IAAIL,KAAK,CAACM,aAAa,EAAE;IACvBtB,kBAAkB,CAACgB,KAAK,EAAEA,KAAK,CAACM,aAAa,EAAEpB,QAAQ,CAAC;EAC1D;AACF","ignoreList":[]}
+{"version":3,"names":["_updatePropsJS","snapshots","WeakMap","makeElementVisible","element","delay","visibility","setTimeout","fixElementPosition","parent","snapshot","parentRect","getBoundingClientRect","parentBorderTopValue","parseInt","getComputedStyle","borderTopWidth","parentBorderLeftValue","borderLeftWidth","dummyRect","top","style","left","setElementPosition","transform","position","width","height","margin","parentElement"],"sources":["componentStyle.ts"],"sourcesContent":["'use strict';\n\nimport { _updatePropsJS } from '../../js-reanimated';\nimport type { ReanimatedHTMLElement } from '../../js-reanimated';\n\nexport interface ReanimatedSnapshot {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  scrollOffsets: ScrollOffsets;\n}\n\nexport interface ScrollOffsets {\n  scrollTopOffset: number;\n  scrollLeftOffset: number;\n}\n\nexport const snapshots = new WeakMap<HTMLElement, ReanimatedSnapshot>();\n\nexport function makeElementVisible(element: HTMLElement, delay: number) {\n  if (delay === 0) {\n    _updatePropsJS({ visibility: 'initial' }, element as ReanimatedHTMLElement);\n  } else {\n    setTimeout(() => {\n      _updatePropsJS(\n        { visibility: 'initial' },\n        element as ReanimatedHTMLElement\n      );\n    }, delay * 1000);\n  }\n}\n\nfunction fixElementPosition(\n  element: HTMLElement,\n  parent: HTMLElement,\n  snapshot: ReanimatedSnapshot\n) {\n  const parentRect = parent.getBoundingClientRect();\n\n  const parentBorderTopValue = parseInt(\n    getComputedStyle(parent).borderTopWidth\n  );\n\n  const parentBorderLeftValue = parseInt(\n    getComputedStyle(parent).borderLeftWidth\n  );\n\n  const dummyRect = element.getBoundingClientRect();\n  // getBoundingClientRect returns DOMRect with position of the element with respect to document body.\n  // However, using position `absolute` doesn't guarantee, that the dummy will be placed relative to body element.\n  // The trick below allows us to once again get position relative to body, by comparing snapshot with new position of the dummy.\n  if (dummyRect.top !== snapshot.top) {\n    element.style.top = `${\n      snapshot.top - parentRect.top - parentBorderTopValue\n    }px`;\n  }\n\n  if (dummyRect.left !== snapshot.left) {\n    element.style.left = `${\n      snapshot.left - parentRect.left - parentBorderLeftValue\n    }px`;\n  }\n}\n\nexport function setElementPosition(\n  element: HTMLElement,\n  snapshot: ReanimatedSnapshot\n) {\n  element.style.transform = '';\n  element.style.position = 'absolute';\n  element.style.top = `${snapshot.top}px`;\n  element.style.left = `${snapshot.left}px`;\n  element.style.width = `${snapshot.width}px`;\n  element.style.height = `${snapshot.height}px`;\n  element.style.margin = '0px'; // tmpElement has absolute position, so margin is not necessary\n\n  if (element.parentElement) {\n    fixElementPosition(element, element.parentElement, snapshot);\n  }\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,cAAc,QAAQ,qBAAqB;AAgBpD,OAAO,MAAMC,SAAS,GAAG,IAAIC,OAAO,CAAkC,CAAC;AAEvE,OAAO,SAASC,kBAAkBA,CAACC,OAAoB,EAAEC,KAAa,EAAE;EACtE,IAAIA,KAAK,KAAK,CAAC,EAAE;IACfL,cAAc,CAAC;MAAEM,UAAU,EAAE;IAAU,CAAC,EAAEF,OAAgC,CAAC;EAC7E,CAAC,MAAM;IACLG,UAAU,CAAC,MAAM;MACfP,cAAc,CACZ;QAAEM,UAAU,EAAE;MAAU,CAAC,EACzBF,OACF,CAAC;IACH,CAAC,EAAEC,KAAK,GAAG,IAAI,CAAC;EAClB;AACF;AAEA,SAASG,kBAAkBA,CACzBJ,OAAoB,EACpBK,MAAmB,EACnBC,QAA4B,EAC5B;EACA,MAAMC,UAAU,GAAGF,MAAM,CAACG,qBAAqB,CAAC,CAAC;EAEjD,MAAMC,oBAAoB,GAAGC,QAAQ,CACnCC,gBAAgB,CAACN,MAAM,CAAC,CAACO,cAC3B,CAAC;EAED,MAAMC,qBAAqB,GAAGH,QAAQ,CACpCC,gBAAgB,CAACN,MAAM,CAAC,CAACS,eAC3B,CAAC;EAED,MAAMC,SAAS,GAAGf,OAAO,CAACQ,qBAAqB,CAAC,CAAC;EACjD;EACA;EACA;EACA,IAAIO,SAAS,CAACC,GAAG,KAAKV,QAAQ,CAACU,GAAG,EAAE;IAClChB,OAAO,CAACiB,KAAK,CAACD,GAAG,GAAI,GACnBV,QAAQ,CAACU,GAAG,GAAGT,UAAU,CAACS,GAAG,GAAGP,oBACjC,IAAG;EACN;EAEA,IAAIM,SAAS,CAACG,IAAI,KAAKZ,QAAQ,CAACY,IAAI,EAAE;IACpClB,OAAO,CAACiB,KAAK,CAACC,IAAI,GAAI,GACpBZ,QAAQ,CAACY,IAAI,GAAGX,UAAU,CAACW,IAAI,GAAGL,qBACnC,IAAG;EACN;AACF;AAEA,OAAO,SAASM,kBAAkBA,CAChCnB,OAAoB,EACpBM,QAA4B,EAC5B;EACAN,OAAO,CAACiB,KAAK,CAACG,SAAS,GAAG,EAAE;EAC5BpB,OAAO,CAACiB,KAAK,CAACI,QAAQ,GAAG,UAAU;EACnCrB,OAAO,CAACiB,KAAK,CAACD,GAAG,GAAI,GAAEV,QAAQ,CAACU,GAAI,IAAG;EACvChB,OAAO,CAACiB,KAAK,CAACC,IAAI,GAAI,GAAEZ,QAAQ,CAACY,IAAK,IAAG;EACzClB,OAAO,CAACiB,KAAK,CAACK,KAAK,GAAI,GAAEhB,QAAQ,CAACgB,KAAM,IAAG;EAC3CtB,OAAO,CAACiB,KAAK,CAACM,MAAM,GAAI,GAAEjB,QAAQ,CAACiB,MAAO,IAAG;EAC7CvB,OAAO,CAACiB,KAAK,CAACO,MAAM,GAAG,KAAK,CAAC,CAAC;;EAE9B,IAAIxB,OAAO,CAACyB,aAAa,EAAE;IACzBrB,kBAAkB,CAACJ,OAAO,EAAEA,OAAO,CAACyB,aAAa,EAAEnB,QAAQ,CAAC;EAC9D;AACF","ignoreList":[]}

package/lib/module/layoutReanimation/web/componentUtils.js

@@ -1,13 +1,15 @@
 'use strict';
 
-import { Animations, TransitionType, WebEasings } from './config';
+import { Animations, TransitionType } from './config';
+import { WebEasings } from './Easing.web';
 import { TransitionGenerator } from './createAnimation';
 import { scheduleAnimationCleanup } from './domUtils';
 import { _updatePropsJS } from '../../js-reanimated';
 import { ReduceMotion } from '../../commonTypes';
 import { isReducedMotion } from '../../PlatformChecker';
 import { LayoutAnimationType } from '../animationBuilder/commonTypes';
-import { setDummyPosition, snapshots } from './componentStyle';
+import { setElementPosition, snapshots } from './componentStyle';
+import { Keyframe } from '../animationBuilder';
 function getEasingFromConfig(config) {
   const easingName = config.easingV && config.easingV.name in WebEasings ? config.easingV.name : 'linear';
   return `cubic-bezier(${WebEasings[easingName].toString()})`;
@@ -36,8 +38,11 @@ export function getReducedMotionFromConfig(config) {
       return isReducedMotion();
   }
 }
-function getDurationFromConfig(config, isLayoutTransition, animationName) {
-  const defaultDuration = isLayoutTransition ? 0.3 : Animations[animationName].duration;
+function getDurationFromConfig(config, animationName) {
+  // 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].duration : 0.3;
   return config.durationV !== undefined ? config.durationV / 1000 : defaultDuration;
 }
 function getCallbackFromConfig(config) {
@@ -46,17 +51,32 @@ function getCallbackFromConfig(config) {
 function getReversedFromConfig(config) {
   return !!config.reversed;
 }
-export function getProcessedConfig(animationName, animationType, config, initialAnimationName) {
+export function getProcessedConfig(animationName, animationType, config) {
   return {
     animationName,
     animationType,
-    duration: getDurationFromConfig(config, animationType === LayoutAnimationType.LAYOUT, initialAnimationName),
+    duration: getDurationFromConfig(config, animationName),
     delay: getDelayFromConfig(config),
     easing: getEasingFromConfig(config),
     callback: getCallbackFromConfig(config),
     reversed: getReversedFromConfig(config)
   };
 }
+export function maybeModifyStyleForKeyframe(element, config) {
+  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)) {
+    if ('originX' in timestampRules || 'originY' in timestampRules) {
+      element.style.position = 'absolute';
+      return;
+    }
+  }
+}
 export function saveSnapshot(element) {
   const rect = element.getBoundingClientRect();
   const snapshot = {
@@ -68,19 +88,31 @@ export function saveSnapshot(element) {
   };
   snapshots.set(element, snapshot);
 }
-export function setElementAnimation(element, animationConfig) {
+export function setElementAnimation(element, 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 = () => {
     var _animationConfig$call;
+    if (shouldSavePosition) {
+      saveSnapshot(element);
+    }
     (_animationConfig$call = animationConfig.callback) === null || _animationConfig$call === void 0 || _animationConfig$call.call(animationConfig, true);
     element.removeEventListener('animationcancel', animationCancelHandler);
   };
@@ -95,14 +127,16 @@ export function setElementAnimation(element, animationConfig) {
     if (animationConfig.animationType === LayoutAnimationType.ENTERING) {
       _updatePropsJS({
         visibility: 'initial'
-      }, {
-        _component: element
-      });
+      }, element);
     }
     element.addEventListener('animationcancel', animationCancelHandler);
   };
   if (!(animationName in Animations)) {
-    scheduleAnimationCleanup(animationName, duration + delay);
+    scheduleAnimationCleanup(animationName, duration + delay, () => {
+      if (shouldSavePosition) {
+        setElementPosition(element, snapshots.get(element));
+      }
+    });
   }
 }
 export function handleLayoutTransition(element, animationConfig, transitionData) {
@@ -120,6 +154,9 @@ export function handleLayoutTransition(element, animationConfig, transitionData)
     case 'FadingTransition':
       animationType = TransitionType.FADING;
       break;
+    case 'JumpingTransition':
+      animationType = TransitionType.JUMPING;
+      break;
     default:
       animationType = TransitionType.LINEAR;
       break;
@@ -149,8 +186,6 @@ export function handleExitingAnimation(element, animationConfig) {
   const dummy = element.cloneNode();
   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.
@@ -181,7 +216,7 @@ export function handleExitingAnimation(element, animationConfig) {
     snapshot.left += lastScrollLeftOffset - currentScrollLeftOffset;
   }
   snapshots.set(dummy, snapshot);
-  setDummyPosition(dummy, snapshot);
+  setElementPosition(dummy, snapshot);
   const originalOnAnimationEnd = dummy.onanimationend;
   dummy.onanimationend = function (event) {
     if (parent !== null && parent !== void 0 && parent.contains(dummy)) {

package/lib/module/layoutReanimation/web/componentUtils.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animations","TransitionType","WebEasings","TransitionGenerator","scheduleAnimationCleanup","_updatePropsJS","ReduceMotion","isReducedMotion","LayoutAnimationType","setDummyPosition","snapshots","getEasingFromConfig","config","easingName","easingV","name","toString","getRandomDelay","maxDelay","Math","floor","random","getDelayFromConfig","shouldRandomizeDelay","randomizeDelay","delay","delayV","getReducedMotionFromConfig","reduceMotionV","Never","Always","getDurationFromConfig","isLayoutTransition","animationName","defaultDuration","duration","durationV","undefined","getCallbackFromConfig","callbackV","getReversedFromConfig","reversed","getProcessedConfig","animationType","initialAnimationName","LAYOUT","easing","callback","saveSnapshot","element","rect","getBoundingClientRect","snapshot","top","left","width","height","scrollOffsets","getElementScrollValue","set","setElementAnimation","animationConfig","style","animationDuration","animationDelay","animationTimingFunction","onanimationend","_animationConfig$call","call","removeEventListener","animationCancelHandler","_animationConfig$call2","onanimationstart","ENTERING","visibility","_component","addEventListener","handleLayoutTransition","transitionData","LINEAR","SEQUENCED","FADING","current","scrollTopOffset","scrollLeftOffset","scrollTop","scrollLeft","parentElement","handleExitingAnimation","parent","offsetParent","dummy","cloneNode","reanimatedDummy","firstChild","appendChild","get","currentScrollTopOffset","lastScrollTopOffset","currentScrollLeftOffset","lastScrollLeftOffset","originalOnAnimationEnd","event","contains","removedAfterAnimation","removeChild"],"sources":["componentUtils.ts"],"sourcesContent":["'use strict';\n\nimport { Animations, TransitionType, WebEasings } from './config';\nimport type {\n  AnimationCallback,\n  AnimationConfig,\n  AnimationNames,\n  CustomConfig,\n  WebEasingsNames,\n} from './config';\nimport type { TransitionData } from './animationParser';\nimport { TransitionGenerator } from './createAnimation';\nimport { scheduleAnimationCleanup } from './domUtils';\nimport { _updatePropsJS } from '../../js-reanimated';\nimport type { ReanimatedHTMLElement } from '../../js-reanimated';\nimport { ReduceMotion } from '../../commonTypes';\nimport { isReducedMotion } from '../../PlatformChecker';\nimport { LayoutAnimationType } from '../animationBuilder/commonTypes';\nimport type { ReanimatedSnapshot, ScrollOffsets } from './componentStyle';\nimport { setDummyPosition, snapshots } from './componentStyle';\n\nfunction getEasingFromConfig(config: CustomConfig): string {\n  const easingName =\n    config.easingV && config.easingV.name in WebEasings\n      ? (config.easingV.name as WebEasingsNames)\n      : 'linear';\n\n  return `cubic-bezier(${WebEasings[easingName].toString()})`;\n}\n\nfunction getRandomDelay(maxDelay = 1000) {\n  return Math.floor(Math.random() * (maxDelay + 1)) / 1000;\n}\n\nfunction getDelayFromConfig(config: CustomConfig): number {\n  const shouldRandomizeDelay = config.randomizeDelay;\n\n  const delay = shouldRandomizeDelay ? getRandomDelay() : 0;\n\n  if (!config.delayV) {\n    return delay;\n  }\n\n  return shouldRandomizeDelay\n    ? getRandomDelay(config.delayV)\n    : config.delayV / 1000;\n}\n\nexport function getReducedMotionFromConfig(config: CustomConfig) {\n  if (!config.reduceMotionV) {\n    return isReducedMotion();\n  }\n\n  switch (config.reduceMotionV) {\n    case ReduceMotion.Never:\n      return false;\n    case ReduceMotion.Always:\n      return true;\n    default:\n      return isReducedMotion();\n  }\n}\n\nfunction getDurationFromConfig(\n  config: CustomConfig,\n  isLayoutTransition: boolean,\n  animationName: AnimationNames\n): number {\n  const defaultDuration = isLayoutTransition\n    ? 0.3\n    : Animations[animationName].duration;\n\n  return config.durationV !== undefined\n    ? config.durationV / 1000\n    : defaultDuration;\n}\n\nfunction getCallbackFromConfig(config: CustomConfig): AnimationCallback {\n  return config.callbackV !== undefined ? config.callbackV : null;\n}\n\nfunction getReversedFromConfig(config: CustomConfig) {\n  return !!config.reversed;\n}\n\nexport function getProcessedConfig(\n  animationName: string,\n  animationType: LayoutAnimationType,\n  config: CustomConfig,\n  initialAnimationName: AnimationNames\n): AnimationConfig {\n  return {\n    animationName,\n    animationType,\n    duration: getDurationFromConfig(\n      config,\n      animationType === LayoutAnimationType.LAYOUT,\n      initialAnimationName\n    ),\n    delay: getDelayFromConfig(config),\n    easing: getEasingFromConfig(config),\n    callback: getCallbackFromConfig(config),\n    reversed: getReversedFromConfig(config),\n  };\n}\n\nexport function saveSnapshot(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n\n  const snapshot: ReanimatedSnapshot = {\n    top: rect.top,\n    left: rect.left,\n    width: rect.width,\n    height: rect.height,\n    scrollOffsets: getElementScrollValue(element),\n  };\n\n  snapshots.set(element, snapshot);\n}\n\nexport function setElementAnimation(\n  element: HTMLElement,\n  animationConfig: AnimationConfig\n) {\n  const { animationName, duration, delay, easing } = animationConfig;\n\n  element.style.animationName = animationName;\n  element.style.animationDuration = `${duration}s`;\n  element.style.animationDelay = `${delay}s`;\n  element.style.animationTimingFunction = easing;\n\n  element.onanimationend = () => {\n    animationConfig.callback?.(true);\n    element.removeEventListener('animationcancel', animationCancelHandler);\n  };\n\n  const animationCancelHandler = () => {\n    animationConfig.callback?.(false);\n    element.removeEventListener('animationcancel', animationCancelHandler);\n  };\n\n  // Here we have to use `addEventListener` since element.onanimationcancel doesn't work on chrome\n  element.onanimationstart = () => {\n    if (animationConfig.animationType === LayoutAnimationType.ENTERING) {\n      _updatePropsJS(\n        { visibility: 'initial' },\n        { _component: element as ReanimatedHTMLElement }\n      );\n    }\n\n    element.addEventListener('animationcancel', animationCancelHandler);\n  };\n\n  if (!(animationName in Animations)) {\n    scheduleAnimationCleanup(animationName, duration + delay);\n  }\n}\n\nexport function handleLayoutTransition(\n  element: HTMLElement,\n  animationConfig: AnimationConfig,\n  transitionData: TransitionData\n) {\n  const { animationName } = animationConfig;\n\n  let animationType;\n\n  switch (animationName) {\n    case 'LinearTransition':\n      animationType = TransitionType.LINEAR;\n      break;\n    case 'SequencedTransition':\n      animationType = TransitionType.SEQUENCED;\n      break;\n    case 'FadingTransition':\n      animationType = TransitionType.FADING;\n      break;\n    default:\n      animationType = TransitionType.LINEAR;\n      break;\n  }\n\n  animationConfig.animationName = TransitionGenerator(\n    animationType,\n    transitionData\n  );\n\n  setElementAnimation(element, animationConfig);\n}\n\nfunction getElementScrollValue(element: HTMLElement): ScrollOffsets {\n  let current: HTMLElement | null = element;\n\n  const scrollOffsets: ScrollOffsets = {\n    scrollTopOffset: 0,\n    scrollLeftOffset: 0,\n  };\n\n  while (current) {\n    if (current.scrollTop !== 0 && scrollOffsets.scrollTopOffset === 0) {\n      scrollOffsets.scrollTopOffset = current.scrollTop;\n    }\n\n    if (current.scrollLeft !== 0 && scrollOffsets.scrollLeftOffset === 0) {\n      scrollOffsets.scrollLeftOffset = current.scrollLeft;\n    }\n\n    current = current.parentElement;\n  }\n\n  return scrollOffsets;\n}\n\nexport function handleExitingAnimation(\n  element: HTMLElement,\n  animationConfig: AnimationConfig\n) {\n  const parent = element.offsetParent;\n  const dummy = element.cloneNode() as ReanimatedHTMLElement;\n  dummy.reanimatedDummy = true;\n\n  element.style.animationName = '';\n  // We hide current element so only its copy with proper animation will be displayed\n  element.style.visibility = 'hidden';\n\n  // After cloning the element, we want to move all children from original element to its clone. This is because original element\n  // will be unmounted, therefore when this code executes in child component, parent will be either empty or removed soon.\n  // Using element.cloneNode(true) doesn't solve the problem, because it creates copy of children and we won't be able to set their animations\n  //\n  // This loop works because appendChild() moves element into its new parent instead of copying it\n  while (element.firstChild) {\n    dummy.appendChild(element.firstChild);\n  }\n\n  setElementAnimation(dummy, animationConfig);\n  parent?.appendChild(dummy);\n\n  const snapshot = snapshots.get(element)!;\n\n  const scrollOffsets = getElementScrollValue(element);\n\n  // Scroll does not trigger snapshotting, therefore if we start exiting animation after\n  // scrolling through parent component, dummy will end up in wrong place. In order to fix that\n  // we keep last known scroll position in snapshot and then adjust dummy position based on\n  // last known scroll offset and current scroll offset\n\n  const currentScrollTopOffset = scrollOffsets.scrollTopOffset;\n  const lastScrollTopOffset = snapshot.scrollOffsets.scrollTopOffset;\n\n  if (currentScrollTopOffset !== lastScrollTopOffset) {\n    snapshot.top += lastScrollTopOffset - currentScrollTopOffset;\n  }\n\n  const currentScrollLeftOffset = scrollOffsets.scrollLeftOffset;\n  const lastScrollLeftOffset = snapshot.scrollOffsets.scrollLeftOffset;\n\n  if (currentScrollLeftOffset !== lastScrollLeftOffset) {\n    snapshot.left += lastScrollLeftOffset - currentScrollLeftOffset;\n  }\n\n  snapshots.set(dummy, snapshot);\n\n  setDummyPosition(dummy, snapshot);\n\n  const originalOnAnimationEnd = dummy.onanimationend;\n\n  dummy.onanimationend = function (event: AnimationEvent) {\n    if (parent?.contains(dummy)) {\n      dummy.removedAfterAnimation = true;\n      parent.removeChild(dummy);\n    }\n\n    // Given that this function overrides onAnimationEnd, it won't be null\n    originalOnAnimationEnd?.call(this, event);\n  };\n\n  dummy.addEventListener('animationcancel', () => {\n    if (parent?.contains(dummy)) {\n      dummy.removedAfterAnimation = true;\n      parent.removeChild(dummy);\n    }\n  });\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Animations","TransitionType","WebEasings","TransitionGenerator","scheduleAnimationCleanup","_updatePropsJS","ReduceMotion","isReducedMotion","LayoutAnimationType","setElementPosition","snapshots","Keyframe","getEasingFromConfig","config","easingName","easingV","name","toString","getRandomDelay","maxDelay","Math","floor","random","getDelayFromConfig","shouldRandomizeDelay","randomizeDelay","delay","delayV","getReducedMotionFromConfig","reduceMotionV","Never","Always","getDurationFromConfig","animationName","defaultDuration","duration","durationV","undefined","getCallbackFromConfig","callbackV","getReversedFromConfig","reversed","getProcessedConfig","animationType","easing","callback","maybeModifyStyleForKeyframe","element","style","animationFillMode","timestampRules","Object","values","definitions","position","saveSnapshot","rect","getBoundingClientRect","snapshot","top","left","width","height","scrollOffsets","getElementScrollValue","set","setElementAnimation","animationConfig","shouldSavePosition","configureAnimation","animationDuration","animationDelay","animationTimingFunction","ENTERING","requestAnimationFrame","onanimationend","_animationConfig$call","call","removeEventListener","animationCancelHandler","_animationConfig$call2","onanimationstart","visibility","addEventListener","get","handleLayoutTransition","transitionData","LINEAR","SEQUENCED","FADING","JUMPING","current","scrollTopOffset","scrollLeftOffset","scrollTop","scrollLeft","parentElement","handleExitingAnimation","parent","offsetParent","dummy","cloneNode","reanimatedDummy","firstChild","appendChild","currentScrollTopOffset","lastScrollTopOffset","currentScrollLeftOffset","lastScrollLeftOffset","originalOnAnimationEnd","event","contains","removedAfterAnimation","removeChild"],"sources":["componentUtils.ts"],"sourcesContent":["'use strict';\n\nimport { Animations, TransitionType } from './config';\nimport type {\n  AnimationCallback,\n  AnimationConfig,\n  AnimationNames,\n  CustomConfig,\n  KeyframeDefinitions,\n} from './config';\nimport { WebEasings } from './Easing.web';\nimport type { WebEasingsNames } from './Easing.web';\nimport type { TransitionData } from './animationParser';\nimport { TransitionGenerator } from './createAnimation';\nimport { scheduleAnimationCleanup } from './domUtils';\nimport { _updatePropsJS } from '../../js-reanimated';\nimport type { ReanimatedHTMLElement } from '../../js-reanimated';\nimport { ReduceMotion } from '../../commonTypes';\nimport { isReducedMotion } from '../../PlatformChecker';\nimport { LayoutAnimationType } from '../animationBuilder/commonTypes';\nimport type { ReanimatedSnapshot, ScrollOffsets } from './componentStyle';\nimport { setElementPosition, snapshots } from './componentStyle';\nimport { Keyframe } from '../animationBuilder';\n\nfunction getEasingFromConfig(config: CustomConfig): string {\n  const easingName =\n    config.easingV && config.easingV.name in WebEasings\n      ? (config.easingV.name as WebEasingsNames)\n      : 'linear';\n\n  return `cubic-bezier(${WebEasings[easingName].toString()})`;\n}\n\nfunction getRandomDelay(maxDelay = 1000) {\n  return Math.floor(Math.random() * (maxDelay + 1)) / 1000;\n}\n\nfunction getDelayFromConfig(config: CustomConfig): number {\n  const shouldRandomizeDelay = config.randomizeDelay;\n\n  const delay = shouldRandomizeDelay ? getRandomDelay() : 0;\n\n  if (!config.delayV) {\n    return delay;\n  }\n\n  return shouldRandomizeDelay\n    ? getRandomDelay(config.delayV)\n    : config.delayV / 1000;\n}\n\nexport function getReducedMotionFromConfig(config: CustomConfig) {\n  if (!config.reduceMotionV) {\n    return isReducedMotion();\n  }\n\n  switch (config.reduceMotionV) {\n    case ReduceMotion.Never:\n      return false;\n    case ReduceMotion.Always:\n      return true;\n    default:\n      return isReducedMotion();\n  }\n}\n\nfunction getDurationFromConfig(\n  config: CustomConfig,\n  animationName: string\n): number {\n  // Duration in keyframe has to be in seconds. However, when using `.duration()` modifier we pass it in miliseconds.\n  // If `duration` was specified in config, we have to divide it by `1000`, otherwise we return value that is already in seconds.\n\n  const defaultDuration =\n    animationName in Animations\n      ? Animations[animationName as AnimationNames].duration\n      : 0.3;\n\n  return config.durationV !== undefined\n    ? config.durationV / 1000\n    : defaultDuration;\n}\n\nfunction getCallbackFromConfig(config: CustomConfig): AnimationCallback {\n  return config.callbackV !== undefined ? config.callbackV : null;\n}\n\nfunction getReversedFromConfig(config: CustomConfig) {\n  return !!config.reversed;\n}\n\nexport function getProcessedConfig(\n  animationName: string,\n  animationType: LayoutAnimationType,\n  config: CustomConfig\n): AnimationConfig {\n  return {\n    animationName,\n    animationType,\n    duration: getDurationFromConfig(config, animationName),\n    delay: getDelayFromConfig(config),\n    easing: getEasingFromConfig(config),\n    callback: getCallbackFromConfig(config),\n    reversed: getReversedFromConfig(config),\n  };\n}\n\nexport function maybeModifyStyleForKeyframe(\n  element: HTMLElement,\n  config: CustomConfig\n) {\n  if (!(config instanceof Keyframe)) {\n    return;\n  }\n\n  // We need to set `animationFillMode` to `forwards`, otherwise component will go back to its position.\n  // This will result in wrong snapshot\n  element.style.animationFillMode = 'forwards';\n\n  for (const timestampRules of Object.values(\n    config.definitions as KeyframeDefinitions\n  )) {\n    if ('originX' in timestampRules || 'originY' in timestampRules) {\n      element.style.position = 'absolute';\n      return;\n    }\n  }\n}\n\nexport function saveSnapshot(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n\n  const snapshot: ReanimatedSnapshot = {\n    top: rect.top,\n    left: rect.left,\n    width: rect.width,\n    height: rect.height,\n    scrollOffsets: getElementScrollValue(element),\n  };\n\n  snapshots.set(element, snapshot);\n}\n\nexport function setElementAnimation(\n  element: HTMLElement,\n  animationConfig: AnimationConfig,\n  shouldSavePosition = false\n) {\n  const { animationName, duration, delay, easing } = animationConfig;\n\n  const configureAnimation = () => {\n    element.style.animationName = animationName;\n    element.style.animationDuration = `${duration}s`;\n    element.style.animationDelay = `${delay}s`;\n    element.style.animationTimingFunction = easing;\n  };\n\n  if (animationConfig.animationType === LayoutAnimationType.ENTERING) {\n    // On chrome sometimes entering animations flicker. This is most likely caused by animation being interrupted\n    // by already started tasks. To avoid flickering, we use `requestAnimationFrame`, which will run callback right before repaint.\n    requestAnimationFrame(configureAnimation);\n  } else {\n    configureAnimation();\n  }\n\n  element.onanimationend = () => {\n    if (shouldSavePosition) {\n      saveSnapshot(element);\n    }\n\n    animationConfig.callback?.(true);\n    element.removeEventListener('animationcancel', animationCancelHandler);\n  };\n\n  const animationCancelHandler = () => {\n    animationConfig.callback?.(false);\n    element.removeEventListener('animationcancel', animationCancelHandler);\n  };\n\n  // Here we have to use `addEventListener` since element.onanimationcancel doesn't work on chrome\n  element.onanimationstart = () => {\n    if (animationConfig.animationType === LayoutAnimationType.ENTERING) {\n      _updatePropsJS(\n        { visibility: 'initial' },\n        element as ReanimatedHTMLElement\n      );\n    }\n\n    element.addEventListener('animationcancel', animationCancelHandler);\n  };\n\n  if (!(animationName in Animations)) {\n    scheduleAnimationCleanup(animationName, duration + delay, () => {\n      if (shouldSavePosition) {\n        setElementPosition(element, snapshots.get(element)!);\n      }\n    });\n  }\n}\n\nexport function handleLayoutTransition(\n  element: HTMLElement,\n  animationConfig: AnimationConfig,\n  transitionData: TransitionData\n) {\n  const { animationName } = animationConfig;\n\n  let animationType;\n\n  switch (animationName) {\n    case 'LinearTransition':\n      animationType = TransitionType.LINEAR;\n      break;\n    case 'SequencedTransition':\n      animationType = TransitionType.SEQUENCED;\n      break;\n    case 'FadingTransition':\n      animationType = TransitionType.FADING;\n      break;\n    case 'JumpingTransition':\n      animationType = TransitionType.JUMPING;\n      break;\n    default:\n      animationType = TransitionType.LINEAR;\n      break;\n  }\n\n  animationConfig.animationName = TransitionGenerator(\n    animationType,\n    transitionData\n  );\n\n  setElementAnimation(element, animationConfig);\n}\n\nfunction getElementScrollValue(element: HTMLElement): ScrollOffsets {\n  let current: HTMLElement | null = element;\n\n  const scrollOffsets: ScrollOffsets = {\n    scrollTopOffset: 0,\n    scrollLeftOffset: 0,\n  };\n\n  while (current) {\n    if (current.scrollTop !== 0 && scrollOffsets.scrollTopOffset === 0) {\n      scrollOffsets.scrollTopOffset = current.scrollTop;\n    }\n\n    if (current.scrollLeft !== 0 && scrollOffsets.scrollLeftOffset === 0) {\n      scrollOffsets.scrollLeftOffset = current.scrollLeft;\n    }\n\n    current = current.parentElement;\n  }\n\n  return scrollOffsets;\n}\n\nexport function handleExitingAnimation(\n  element: HTMLElement,\n  animationConfig: AnimationConfig\n) {\n  const parent = element.offsetParent;\n  const dummy = element.cloneNode() as ReanimatedHTMLElement;\n  dummy.reanimatedDummy = true;\n\n  element.style.animationName = '';\n\n  // After cloning the element, we want to move all children from original element to its clone. This is because original element\n  // will be unmounted, therefore when this code executes in child component, parent will be either empty or removed soon.\n  // Using element.cloneNode(true) doesn't solve the problem, because it creates copy of children and we won't be able to set their animations\n  //\n  // This loop works because appendChild() moves element into its new parent instead of copying it\n  while (element.firstChild) {\n    dummy.appendChild(element.firstChild);\n  }\n\n  setElementAnimation(dummy, animationConfig);\n  parent?.appendChild(dummy);\n\n  const snapshot = snapshots.get(element)!;\n\n  const scrollOffsets = getElementScrollValue(element);\n\n  // Scroll does not trigger snapshotting, therefore if we start exiting animation after\n  // scrolling through parent component, dummy will end up in wrong place. In order to fix that\n  // we keep last known scroll position in snapshot and then adjust dummy position based on\n  // last known scroll offset and current scroll offset\n\n  const currentScrollTopOffset = scrollOffsets.scrollTopOffset;\n  const lastScrollTopOffset = snapshot.scrollOffsets.scrollTopOffset;\n\n  if (currentScrollTopOffset !== lastScrollTopOffset) {\n    snapshot.top += lastScrollTopOffset - currentScrollTopOffset;\n  }\n\n  const currentScrollLeftOffset = scrollOffsets.scrollLeftOffset;\n  const lastScrollLeftOffset = snapshot.scrollOffsets.scrollLeftOffset;\n\n  if (currentScrollLeftOffset !== lastScrollLeftOffset) {\n    snapshot.left += lastScrollLeftOffset - currentScrollLeftOffset;\n  }\n\n  snapshots.set(dummy, snapshot);\n\n  setElementPosition(dummy, snapshot);\n\n  const originalOnAnimationEnd = dummy.onanimationend;\n\n  dummy.onanimationend = function (event: AnimationEvent) {\n    if (parent?.contains(dummy)) {\n      dummy.removedAfterAnimation = true;\n      parent.removeChild(dummy);\n    }\n\n    // Given that this function overrides onAnimationEnd, it won't be null\n    originalOnAnimationEnd?.call(this, event);\n  };\n\n  dummy.addEventListener('animationcancel', () => {\n    if (parent?.contains(dummy)) {\n      dummy.removedAfterAnimation = true;\n      parent.removeChild(dummy);\n    }\n  });\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/layoutReanimation/web/config.js

@@ -14,6 +14,7 @@ export let TransitionType = /*#__PURE__*/function (TransitionType) {
   TransitionType[TransitionType["LINEAR"] = 0] = "LINEAR";
   TransitionType[TransitionType["SEQUENCED"] = 1] = "SEQUENCED";
   TransitionType[TransitionType["FADING"] = 2] = "FADING";
+  TransitionType[TransitionType["JUMPING"] = 3] = "JUMPING";
   return TransitionType;
 }({});
 export const AnimationsData = {
@@ -58,16 +59,4 @@ export const Animations = {
   ...RollIn,
   ...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]
-};
 //# sourceMappingURL=config.js.map

package/lib/module/layoutReanimation/web/config.js.map

@@ -1 +1 @@
-{"version":3,"names":["BounceIn","BounceInData","BounceOut","BounceOutData","FadeIn","FadeInData","FadeOut","FadeOutData","FlipIn","FlipInData","FlipOut","FlipOutData","LightSpeedIn","LightSpeedInData","LightSpeedOut","LightSpeedOutData","Pinwheel","PinwheelData","RollIn","RollInData","RollOut","RollOutData","RotateIn","RotateInData","RotateOut","RotateOutData","SlideIn","SlideInData","SlideOut","SlideOutData","StretchIn","StretchInData","StretchOut","StretchOutData","ZoomIn","ZoomInData","ZoomOut","ZoomOutData","TransitionType","AnimationsData","Animations","WebEasings","linear","ease","quad","cubic","sin","circle","exp"],"sources":["config.ts"],"sourcesContent":["'use strict';\nimport type { ReduceMotion } from '../../commonTypes';\nimport type { LayoutAnimationType } from '../animationBuilder/commonTypes';\nimport {\n  BounceIn,\n  BounceInData,\n  BounceOut,\n  BounceOutData,\n} from './animation/Bounce.web';\nimport { FadeIn, FadeInData, FadeOut, FadeOutData } from './animation/Fade.web';\nimport { FlipIn, FlipInData, FlipOut, FlipOutData } from './animation/Flip.web';\nimport {\n  LightSpeedIn,\n  LightSpeedInData,\n  LightSpeedOut,\n  LightSpeedOutData,\n} from './animation/Lightspeed.web';\nimport { Pinwheel, PinwheelData } from './animation/Pinwheel.web';\nimport { RollIn, RollInData, RollOut, RollOutData } from './animation/Roll.web';\nimport {\n  RotateIn,\n  RotateInData,\n  RotateOut,\n  RotateOutData,\n} from './animation/Rotate.web';\nimport {\n  SlideIn,\n  SlideInData,\n  SlideOut,\n  SlideOutData,\n} from './animation/Slide.web';\nimport {\n  StretchIn,\n  StretchInData,\n  StretchOut,\n  StretchOutData,\n} from './animation/Stretch.web';\nimport { ZoomIn, ZoomInData, ZoomOut, ZoomOutData } from './animation/Zoom.web';\n\nimport type { AnimationData } from './animationParser';\n\nexport type AnimationCallback = ((finished: boolean) => void) | null;\n\nexport interface AnimationConfig {\n  animationName: string;\n  animationType: LayoutAnimationType;\n  duration: number;\n  delay: number;\n  easing: string;\n  callback: AnimationCallback;\n  reversed: boolean;\n}\n\nexport interface CustomConfig {\n  easingV?: () => number;\n  durationV?: number;\n  delayV?: number;\n  randomizeDelay?: boolean;\n  reduceMotionV?: ReduceMotion;\n  callbackV?: AnimationCallback;\n  reversed?: boolean;\n}\n\nexport enum TransitionType {\n  LINEAR,\n  SEQUENCED,\n  FADING,\n}\n\nexport const AnimationsData: Record<string, AnimationData> = {\n  ...FadeInData,\n  ...FadeOutData,\n  ...BounceInData,\n  ...BounceOutData,\n  ...FlipInData,\n  ...FlipOutData,\n  ...StretchInData,\n  ...StretchOutData,\n  ...ZoomInData,\n  ...ZoomOutData,\n  ...SlideInData,\n  ...SlideOutData,\n  ...LightSpeedInData,\n  ...LightSpeedOutData,\n  ...PinwheelData,\n  ...RotateInData,\n  ...RotateOutData,\n  ...RollInData,\n  ...RollOutData,\n};\n\nexport const Animations = {\n  ...FadeIn,\n  ...FadeOut,\n  ...BounceIn,\n  ...BounceOut,\n  ...FlipIn,\n  ...FlipOut,\n  ...StretchIn,\n  ...StretchOut,\n  ...ZoomIn,\n  ...ZoomOut,\n  ...SlideIn,\n  ...SlideOut,\n  ...LightSpeedIn,\n  ...LightSpeedOut,\n  ...Pinwheel,\n  ...RotateIn,\n  ...RotateOut,\n  ...RollIn,\n  ...RollOut,\n};\n\n// Those are the easings that can be implemented using Bezier curves.\n// Others should be done as CSS animations\nexport const WebEasings = {\n  linear: [0, 0, 1, 1],\n  ease: [0.42, 0, 1, 1],\n  quad: [0.11, 0, 0.5, 0],\n  cubic: [0.32, 0, 0.67, 0],\n  sin: [0.12, 0, 0.39, 0],\n  circle: [0.55, 0, 1, 0.45],\n  exp: [0.7, 0, 0.84, 0],\n};\n\nexport type AnimationNames = keyof typeof Animations;\nexport type LayoutTransitionsNames = keyof typeof AnimationsData;\nexport type WebEasingsNames = keyof typeof WebEasings;\n"],"mappings":"AAAA,YAAY;;AAGZ,SACEA,QAAQ,EACRC,YAAY,EACZC,SAAS,EACTC,aAAa,QACR,wBAAwB;AAC/B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AAC/E,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AAC/E,SACEC,YAAY,EACZC,gBAAgB,EAChBC,aAAa,EACbC,iBAAiB,QACZ,4BAA4B;AACnC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,0BAA0B;AACjE,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AAC/E,SACEC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACTC,aAAa,QACR,wBAAwB;AAC/B,SACEC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,YAAY,QACP,uBAAuB;AAC9B,SACEC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,cAAc,QACT,yBAAyB;AAChC,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AA0B/E,WAAYC,cAAc,0BAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA;AAM1B,OAAO,MAAMC,cAA6C,GAAG;EAC3D,GAAGlC,UAAU;EACb,GAAGE,WAAW;EACd,GAAGN,YAAY;EACf,GAAGE,aAAa;EAChB,GAAGM,UAAU;EACb,GAAGE,WAAW;EACd,GAAGoB,aAAa;EAChB,GAAGE,cAAc;EACjB,GAAGE,UAAU;EACb,GAAGE,WAAW;EACd,GAAGV,WAAW;EACd,GAAGE,YAAY;EACf,GAAGhB,gBAAgB;EACnB,GAAGE,iBAAiB;EACpB,GAAGE,YAAY;EACf,GAAGM,YAAY;EACf,GAAGE,aAAa;EAChB,GAAGN,UAAU;EACb,GAAGE;AACL,CAAC;AAED,OAAO,MAAMmB,UAAU,GAAG;EACxB,GAAGpC,MAAM;EACT,GAAGE,OAAO;EACV,GAAGN,QAAQ;EACX,GAAGE,SAAS;EACZ,GAAGM,MAAM;EACT,GAAGE,OAAO;EACV,GAAGoB,SAAS;EACZ,GAAGE,UAAU;EACb,GAAGE,MAAM;EACT,GAAGE,OAAO;EACV,GAAGV,OAAO;EACV,GAAGE,QAAQ;EACX,GAAGhB,YAAY;EACf,GAAGE,aAAa;EAChB,GAAGE,QAAQ;EACX,GAAGM,QAAQ;EACX,GAAGE,SAAS;EACZ,GAAGN,MAAM;EACT,GAAGE;AACL,CAAC;;AAED;AACA;AACA,OAAO,MAAMqB,UAAU,GAAG;EACxBC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;EACpBC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;EACrBC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;EACvBC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;EACzBC,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;EACvBC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;EAC1BC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;AACvB,CAAC","ignoreList":[]}
+{"version":3,"names":["BounceIn","BounceInData","BounceOut","BounceOutData","FadeIn","FadeInData","FadeOut","FadeOutData","FlipIn","FlipInData","FlipOut","FlipOutData","LightSpeedIn","LightSpeedInData","LightSpeedOut","LightSpeedOutData","Pinwheel","PinwheelData","RollIn","RollInData","RollOut","RollOutData","RotateIn","RotateInData","RotateOut","RotateOutData","SlideIn","SlideInData","SlideOut","SlideOutData","StretchIn","StretchInData","StretchOut","StretchOutData","ZoomIn","ZoomInData","ZoomOut","ZoomOutData","TransitionType","AnimationsData","Animations"],"sources":["config.ts"],"sourcesContent":["'use strict';\nimport type { ReduceMotion } from '../../commonTypes';\nimport type { LayoutAnimationType } from '../animationBuilder/commonTypes';\nimport {\n  BounceIn,\n  BounceInData,\n  BounceOut,\n  BounceOutData,\n} from './animation/Bounce.web';\nimport { FadeIn, FadeInData, FadeOut, FadeOutData } from './animation/Fade.web';\nimport { FlipIn, FlipInData, FlipOut, FlipOutData } from './animation/Flip.web';\nimport {\n  LightSpeedIn,\n  LightSpeedInData,\n  LightSpeedOut,\n  LightSpeedOutData,\n} from './animation/Lightspeed.web';\nimport { Pinwheel, PinwheelData } from './animation/Pinwheel.web';\nimport { RollIn, RollInData, RollOut, RollOutData } from './animation/Roll.web';\nimport {\n  RotateIn,\n  RotateInData,\n  RotateOut,\n  RotateOutData,\n} from './animation/Rotate.web';\nimport {\n  SlideIn,\n  SlideInData,\n  SlideOut,\n  SlideOutData,\n} from './animation/Slide.web';\nimport {\n  StretchIn,\n  StretchInData,\n  StretchOut,\n  StretchOutData,\n} from './animation/Stretch.web';\nimport { ZoomIn, ZoomInData, ZoomOut, ZoomOutData } from './animation/Zoom.web';\n\nimport type { AnimationData, AnimationStyle } from './animationParser';\n\nexport type AnimationCallback = ((finished: boolean) => void) | null;\n\nexport type KeyframeDefinitions = Record<number, AnimationStyle>;\n\nexport interface AnimationConfig {\n  animationName: string;\n  animationType: LayoutAnimationType;\n  duration: number;\n  delay: number;\n  easing: string;\n  callback: AnimationCallback;\n  reversed: boolean;\n}\n\nexport interface CustomConfig {\n  easingV?: () => number;\n  durationV?: number;\n  delayV?: number;\n  randomizeDelay?: boolean;\n  reduceMotionV?: ReduceMotion;\n  callbackV?: AnimationCallback;\n  reversed?: boolean;\n  definitions?: KeyframeDefinitions;\n}\n\nexport enum TransitionType {\n  LINEAR,\n  SEQUENCED,\n  FADING,\n  JUMPING,\n}\n\nexport const AnimationsData: Record<string, AnimationData> = {\n  ...FadeInData,\n  ...FadeOutData,\n  ...BounceInData,\n  ...BounceOutData,\n  ...FlipInData,\n  ...FlipOutData,\n  ...StretchInData,\n  ...StretchOutData,\n  ...ZoomInData,\n  ...ZoomOutData,\n  ...SlideInData,\n  ...SlideOutData,\n  ...LightSpeedInData,\n  ...LightSpeedOutData,\n  ...PinwheelData,\n  ...RotateInData,\n  ...RotateOutData,\n  ...RollInData,\n  ...RollOutData,\n};\n\nexport const Animations = {\n  ...FadeIn,\n  ...FadeOut,\n  ...BounceIn,\n  ...BounceOut,\n  ...FlipIn,\n  ...FlipOut,\n  ...StretchIn,\n  ...StretchOut,\n  ...ZoomIn,\n  ...ZoomOut,\n  ...SlideIn,\n  ...SlideOut,\n  ...LightSpeedIn,\n  ...LightSpeedOut,\n  ...Pinwheel,\n  ...RotateIn,\n  ...RotateOut,\n  ...RollIn,\n  ...RollOut,\n};\n\nexport type AnimationNames = keyof typeof Animations;\nexport type LayoutTransitionsNames = keyof typeof AnimationsData;\n"],"mappings":"AAAA,YAAY;;AAGZ,SACEA,QAAQ,EACRC,YAAY,EACZC,SAAS,EACTC,aAAa,QACR,wBAAwB;AAC/B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AAC/E,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AAC/E,SACEC,YAAY,EACZC,gBAAgB,EAChBC,aAAa,EACbC,iBAAiB,QACZ,4BAA4B;AACnC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,0BAA0B;AACjE,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AAC/E,SACEC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACTC,aAAa,QACR,wBAAwB;AAC/B,SACEC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,YAAY,QACP,uBAAuB;AAC9B,SACEC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,cAAc,QACT,yBAAyB;AAChC,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,sBAAsB;AA6B/E,WAAYC,cAAc,0BAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA;AAO1B,OAAO,MAAMC,cAA6C,GAAG;EAC3D,GAAGlC,UAAU;EACb,GAAGE,WAAW;EACd,GAAGN,YAAY;EACf,GAAGE,aAAa;EAChB,GAAGM,UAAU;EACb,GAAGE,WAAW;EACd,GAAGoB,aAAa;EAChB,GAAGE,cAAc;EACjB,GAAGE,UAAU;EACb,GAAGE,WAAW;EACd,GAAGV,WAAW;EACd,GAAGE,YAAY;EACf,GAAGhB,gBAAgB;EACnB,GAAGE,iBAAiB;EACpB,GAAGE,YAAY;EACf,GAAGM,YAAY;EACf,GAAGE,aAAa;EAChB,GAAGN,UAAU;EACb,GAAGE;AACL,CAAC;AAED,OAAO,MAAMmB,UAAU,GAAG;EACxB,GAAGpC,MAAM;EACT,GAAGE,OAAO;EACV,GAAGN,QAAQ;EACX,GAAGE,SAAS;EACZ,GAAGM,MAAM;EACT,GAAGE,OAAO;EACV,GAAGoB,SAAS;EACZ,GAAGE,UAAU;EACb,GAAGE,MAAM;EACT,GAAGE,OAAO;EACV,GAAGV,OAAO;EACV,GAAGE,QAAQ;EACX,GAAGhB,YAAY;EACf,GAAGE,aAAa;EAChB,GAAGE,QAAQ;EACX,GAAGM,QAAQ;EACX,GAAGE,SAAS;EACZ,GAAGN,MAAM;EACT,GAAGE;AACL,CAAC","ignoreList":[]}

package/lib/module/layoutReanimation/web/createAnimation.js

@@ -5,8 +5,8 @@ import { convertAnimationObjectToKeyframes } from './animationParser';
 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';
-
 // 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.
@@ -18,7 +18,7 @@ function addPxToTranslate(transform) {
   const newTransform = transform.map(transformProp => {
     const newTransformProp = {};
     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`;
@@ -31,6 +31,22 @@ function addPxToTranslate(transform) {
   });
   return newTransform;
 }
+export function createCustomKeyFrameAnimation(keyframeDefinitions) {
+  for (const value of Object.values(keyframeDefinitions)) {
+    if (value.transform) {
+      value.transform = addPxToTranslate(value.transform);
+    }
+  }
+  const 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() {
   return `REA${customKeyframeCounter++}`;
@@ -56,6 +72,9 @@ export function TransitionGenerator(transitionType, transitionData) {
     case TransitionType.FADING:
       transitionObject = FadingTransition(transitionKeyframeName, transitionData);
       break;
+    case TransitionType.JUMPING:
+      transitionObject = JumpingTransition(transitionKeyframeName, transitionData);
+      break;
   }
   const transitionKeyframe = convertAnimationObjectToKeyframes(transitionObject);
   insertWebAnimation(transitionKeyframeName, transitionKeyframe);

package/lib/module/layoutReanimation/web/createAnimation.js.map

@@ -1 +1 @@
-{"version":3,"names":["TransitionType","convertAnimationObjectToKeyframes","LinearTransition","SequencedTransition","FadingTransition","insertWebAnimation","addPxToTranslate","transform","newTransform","map","transformProp","newTransformProp","key","value","Object","entries","includes","customKeyframeCounter","generateNextCustomKeyframeName","TransitionGenerator","transitionType","transitionData","transitionKeyframeName","transitionObject","LINEAR","SEQUENCED","FADING","transitionKeyframe"],"sources":["createAnimation.ts"],"sourcesContent":["'use strict';\n\nimport { TransitionType } from './config';\nimport { convertAnimationObjectToKeyframes } from './animationParser';\nimport type {\n  ReanimatedWebTransformProperties,\n  TransitionData,\n} from './animationParser';\nimport type { TransformsStyle } from 'react-native';\nimport { LinearTransition } from './transition/Linear.web';\nimport { SequencedTransition } from './transition/Sequenced.web';\nimport { FadingTransition } from './transition/Fading.web';\nimport { insertWebAnimation } from './domUtils';\n\n// Translate values are passed as numbers. However, if `translate` property receives number, it will not automatically\n// convert it to `px`. Therefore if we want to keep transform we have to add 'px' suffix to each of translate values\n// that are present inside transform.\n//\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction addPxToTranslate(\n  transform: NonNullable<TransformsStyle['transform']>\n) {\n  type RNTransformProp = (typeof transform)[number];\n\n  // @ts-ignore `existingTransform` cannot be string because in that case\n  // we throw error in `extractTransformFromStyle`\n  const newTransform = transform.map((transformProp: RNTransformProp) => {\n    const newTransformProp: ReanimatedWebTransformProperties = {};\n    for (const [key, value] of Object.entries(transformProp)) {\n      if (key.includes('translate')) {\n        // @ts-ignore After many trials we decided to ignore this error - it says that we cannot use 'key' to index this object.\n        // Sadly it doesn't go away after using cast `key as keyof TransformProperties`.\n        newTransformProp[key] = `${value}px`;\n      } else {\n        // @ts-ignore same as above.\n        newTransformProp[key] = value;\n      }\n    }\n    return newTransformProp;\n  });\n\n  return newTransform;\n}\n\nlet customKeyframeCounter = 0;\n\nfunction generateNextCustomKeyframeName() {\n  return `REA${customKeyframeCounter++}`;\n}\n\n/**\n * Creates transition of given type, appends it to stylesheet and returns keyframe name.\n *\n * @param transitionType - Type of transition (e.g. LINEAR).\n * @param transitionData - Object containing data for transforms (translateX, scaleX,...).\n * @returns Keyframe name that represents transition.\n */\nexport function TransitionGenerator(\n  transitionType: TransitionType,\n  transitionData: TransitionData\n) {\n  const transitionKeyframeName = generateNextCustomKeyframeName();\n  let transitionObject;\n\n  switch (transitionType) {\n    case TransitionType.LINEAR:\n      transitionObject = LinearTransition(\n        transitionKeyframeName,\n        transitionData\n      );\n      break;\n    case TransitionType.SEQUENCED:\n      transitionObject = SequencedTransition(\n        transitionKeyframeName,\n        transitionData\n      );\n      break;\n    case TransitionType.FADING:\n      transitionObject = FadingTransition(\n        transitionKeyframeName,\n        transitionData\n      );\n      break;\n  }\n\n  const transitionKeyframe =\n    convertAnimationObjectToKeyframes(transitionObject);\n\n  insertWebAnimation(transitionKeyframeName, transitionKeyframe);\n\n  return transitionKeyframeName;\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,cAAc,QAAQ,UAAU;AACzC,SAASC,iCAAiC,QAAQ,mBAAmB;AAMrE,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,kBAAkB,QAAQ,YAAY;;AAE/C;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CACvBC,SAAoD,EACpD;EAGA;EACA;EACA,MAAMC,YAAY,GAAGD,SAAS,CAACE,GAAG,CAAEC,aAA8B,IAAK;IACrE,MAAMC,gBAAkD,GAAG,CAAC,CAAC;IAC7D,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACL,aAAa,CAAC,EAAE;MACxD,IAAIE,GAAG,CAACI,QAAQ,CAAC,WAAW,CAAC,EAAE;QAC7B;QACA;QACAL,gBAAgB,CAACC,GAAG,CAAC,GAAI,GAAEC,KAAM,IAAG;MACtC,CAAC,MAAM;QACL;QACAF,gBAAgB,CAACC,GAAG,CAAC,GAAGC,KAAK;MAC/B;IACF;IACA,OAAOF,gBAAgB;EACzB,CAAC,CAAC;EAEF,OAAOH,YAAY;AACrB;AAEA,IAAIS,qBAAqB,GAAG,CAAC;AAE7B,SAASC,8BAA8BA,CAAA,EAAG;EACxC,OAAQ,MAAKD,qBAAqB,EAAG,EAAC;AACxC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,mBAAmBA,CACjCC,cAA8B,EAC9BC,cAA8B,EAC9B;EACA,MAAMC,sBAAsB,GAAGJ,8BAA8B,CAAC,CAAC;EAC/D,IAAIK,gBAAgB;EAEpB,QAAQH,cAAc;IACpB,KAAKpB,cAAc,CAACwB,MAAM;MACxBD,gBAAgB,GAAGrB,gBAAgB,CACjCoB,sBAAsB,EACtBD,cACF,CAAC;MACD;IACF,KAAKrB,cAAc,CAACyB,SAAS;MAC3BF,gBAAgB,GAAGpB,mBAAmB,CACpCmB,sBAAsB,EACtBD,cACF,CAAC;MACD;IACF,KAAKrB,cAAc,CAAC0B,MAAM;MACxBH,gBAAgB,GAAGnB,gBAAgB,CACjCkB,sBAAsB,EACtBD,cACF,CAAC;MACD;EACJ;EAEA,MAAMM,kBAAkB,GACtB1B,iCAAiC,CAACsB,gBAAgB,CAAC;EAErDlB,kBAAkB,CAACiB,sBAAsB,EAAEK,kBAAkB,CAAC;EAE9D,OAAOL,sBAAsB;AAC/B","ignoreList":[]}
+{"version":3,"names":["TransitionType","convertAnimationObjectToKeyframes","LinearTransition","SequencedTransition","FadingTransition","JumpingTransition","insertWebAnimation","addPxToTranslate","transform","newTransform","map","transformProp","newTransformProp","key","value","Object","entries","includes","createCustomKeyFrameAnimation","keyframeDefinitions","values","animationData","name","style","duration","generateNextCustomKeyframeName","parsedKeyframe","customKeyframeCounter","TransitionGenerator","transitionType","transitionData","transitionKeyframeName","transitionObject","LINEAR","SEQUENCED","FADING","JUMPING","transitionKeyframe"],"sources":["createAnimation.ts"],"sourcesContent":["'use strict';\n\nimport { TransitionType } from './config';\nimport type { KeyframeDefinitions } from './config';\nimport { convertAnimationObjectToKeyframes } from './animationParser';\nimport type {\n  AnimationData,\n  ReanimatedWebTransformProperties,\n  TransitionData,\n} from './animationParser';\nimport type { TransformsStyle } from 'react-native';\nimport { LinearTransition } from './transition/Linear.web';\nimport { SequencedTransition } from './transition/Sequenced.web';\nimport { FadingTransition } from './transition/Fading.web';\nimport { JumpingTransition } from './transition/Jumping.web';\nimport { insertWebAnimation } from './domUtils';\n\ntype TransformType = NonNullable<TransformsStyle['transform']>;\n\n// Translate values are passed as numbers. However, if `translate` property receives number, it will not automatically\n// convert it to `px`. Therefore if we want to keep transform we have to add 'px' suffix to each of translate values\n// that are present inside transform.\n//\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction addPxToTranslate(transform: TransformType) {\n  type RNTransformProp = (typeof transform)[number];\n\n  // @ts-ignore `existingTransform` cannot be string because in that case\n  // we throw error in `extractTransformFromStyle`\n  const newTransform = transform.map((transformProp: RNTransformProp) => {\n    const newTransformProp: ReanimatedWebTransformProperties = {};\n    for (const [key, value] of Object.entries(transformProp)) {\n      if (key.includes('translate') && typeof value === 'number') {\n        // @ts-ignore After many trials we decided to ignore this error - it says that we cannot use 'key' to index this object.\n        // Sadly it doesn't go away after using cast `key as keyof TransformProperties`.\n        newTransformProp[key] = `${value}px`;\n      } else {\n        // @ts-ignore same as above.\n        newTransformProp[key] = value;\n      }\n    }\n    return newTransformProp;\n  });\n\n  return newTransform;\n}\n\nexport function createCustomKeyFrameAnimation(\n  keyframeDefinitions: KeyframeDefinitions\n) {\n  for (const value of Object.values(keyframeDefinitions)) {\n    if (value.transform) {\n      value.transform = addPxToTranslate(value.transform as TransformType);\n    }\n  }\n\n  const animationData: AnimationData = {\n    name: '',\n    style: keyframeDefinitions,\n    duration: -1,\n  };\n\n  animationData.name = generateNextCustomKeyframeName();\n\n  const parsedKeyframe = convertAnimationObjectToKeyframes(animationData);\n\n  insertWebAnimation(animationData.name, parsedKeyframe);\n\n  return animationData.name;\n}\n\nlet customKeyframeCounter = 0;\n\nfunction generateNextCustomKeyframeName() {\n  return `REA${customKeyframeCounter++}`;\n}\n\n/**\n * Creates transition of given type, appends it to stylesheet and returns keyframe name.\n *\n * @param transitionType - Type of transition (e.g. LINEAR).\n * @param transitionData - Object containing data for transforms (translateX, scaleX,...).\n * @returns Keyframe name that represents transition.\n */\nexport function TransitionGenerator(\n  transitionType: TransitionType,\n  transitionData: TransitionData\n) {\n  const transitionKeyframeName = generateNextCustomKeyframeName();\n  let transitionObject;\n\n  switch (transitionType) {\n    case TransitionType.LINEAR:\n      transitionObject = LinearTransition(\n        transitionKeyframeName,\n        transitionData\n      );\n      break;\n    case TransitionType.SEQUENCED:\n      transitionObject = SequencedTransition(\n        transitionKeyframeName,\n        transitionData\n      );\n      break;\n    case TransitionType.FADING:\n      transitionObject = FadingTransition(\n        transitionKeyframeName,\n        transitionData\n      );\n      break;\n\n    case TransitionType.JUMPING:\n      transitionObject = JumpingTransition(\n        transitionKeyframeName,\n        transitionData\n      );\n      break;\n  }\n\n  const transitionKeyframe =\n    convertAnimationObjectToKeyframes(transitionObject);\n\n  insertWebAnimation(transitionKeyframeName, transitionKeyframe);\n\n  return transitionKeyframeName;\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/layoutReanimation/web/domUtils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import { isWindowAvailable } from '../../PlatformChecker';
-import { setDummyPosition, snapshots } from './componentStyle';
+import { setElementPosition, snapshots } from './componentStyle';
 import { Animations } from './config';
 const PREDEFINED_WEB_ANIMATIONS_ID = 'ReanimatedPredefinedWebAnimationsStyle';
 const CUSTOM_WEB_ANIMATIONS_ID = 'ReanimatedCustomWebAnimationsStyle';
@@ -59,7 +59,7 @@ export function insertWebAnimation(animationName, keyframe) {
     animationNameToIndex.set(animationNameList[i], nextAnimationIndex + 1);
   }
 }
-function removeWebAnimation(animationName) {
+function removeWebAnimation(animationName, animationRemoveCallback) {
   var _styleTag$sheet;
   // Without this check SSR crashes because document is undefined (NextExample on CI)
   if (!isWindowAvailable()) {
@@ -70,6 +70,7 @@ function removeWebAnimation(animationName) {
   if (currentAnimationIndex === undefined) {
     throw new Error('[Reanimated] Failed to obtain animation index.');
   }
+  animationRemoveCallback();
   (_styleTag$sheet = styleTag.sheet) === null || _styleTag$sheet === void 0 || _styleTag$sheet.deleteRule(currentAnimationIndex);
   animationNameList.splice(currentAnimationIndex, 1);
   animationNameToIndex.delete(animationName);
@@ -85,11 +86,11 @@ function removeWebAnimation(animationName) {
 const timeoutScale = 1.25; // We use this value to enlarge timeout duration. It can prove useful if animation lags.
 const frameDurationMs = 16; // Just an approximation.
 const minimumFrames = 10;
-export function scheduleAnimationCleanup(animationName, animationDuration) {
+export function scheduleAnimationCleanup(animationName, animationDuration, animationRemoveCallback) {
   // 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
   const timeoutValue = Math.max(animationDuration * timeoutScale * 1000, animationDuration + frameDurationMs * minimumFrames);
-  setTimeout(() => removeWebAnimation(animationName), timeoutValue);
+  setTimeout(() => removeWebAnimation(animationName, animationRemoveCallback), timeoutValue);
 }
 function reattachElementToAncestor(child, parent) {
   const childSnapshot = snapshots.get(child);
@@ -101,7 +102,7 @@ function reattachElementToAncestor(child, parent) {
   // We use that so we don't end up in infinite loop
   child.removedAfterAnimation = true;
   parent.appendChild(child);
-  setDummyPosition(child, childSnapshot);
+  setElementPosition(child, childSnapshot);
   const originalOnAnimationEnd = child.onanimationend;
   child.onanimationend = function (event) {
     parent.removeChild(child);