react-native-reanimated 2.3.0-beta.3 → 2.4.0

package/lib/{reanimated2 → src/reanimated2}/hook/utils.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { processColor } from '../Colors';
 import { makeRemote } from '../core';
-import { isWeb } from '../PlatformChecker';
+import { isWeb, isJest } from '../PlatformChecker';
 import { colorProps } from '../UpdateProps';
 import WorkletEventHandler from '../WorkletEventHandler';
 export function useEvent(handler, eventNames = [], rebuild = false) {
@@ -36,7 +36,7 @@ export function useHandler(handlers, dependencies) {
     dependencies = buildDependencies(dependencies, handlers);
     const doDependenciesDiffer = !areDependenciesEqual(dependencies, savedDependencies);
     initRef.current.savedDependencies = dependencies;
-    const useWeb = isWeb();
+    const useWeb = isWeb() || isJest();
     return { context, doDependenciesDiffer, useWeb };
 }
 // builds one big hash from multiple worklets' hashes
@@ -95,7 +95,12 @@ export function parseColors(updates) {
     'worklet';
     for (const key in updates) {
         if (colorProps.indexOf(key) !== -1) {
-            updates[key] = processColor(updates[key]);
+            // value could be an animation in which case processColor will recognize it and will return undefined
+            // -> in such a case we don't want to override style of that key
+            const processedColor = processColor(updates[key]);
+            if (processedColor !== undefined) {
+                updates[key] = processedColor;
+            }
         }
     }
 }
@@ -132,24 +137,22 @@ export function isAnimated(prop) {
 export function styleDiff(oldStyle, newStyle) {
     'worklet';
     const diff = {};
-    Object.keys(oldStyle).forEach((key) => {
+    for (const key in oldStyle) {
         if (newStyle[key] === undefined) {
             diff[key] = null;
         }
-    });
-    Object.keys(newStyle).forEach((key) => {
+    }
+    for (const key in newStyle) {
         const value = newStyle[key];
         const oldValue = oldStyle[key];
         if (isAnimated(value)) {
             // do nothing
-            return;
+            continue;
         }
-        if (oldValue !== value &&
-            JSON.stringify(oldValue) !== JSON.stringify(value)) {
-            // I'd use deep equal here but that'd take additional work and this was easier
+        if (oldValue !== value) {
             diff[key] = value;
         }
-    });
+    }
     return diff;
 }
 export function getStyleWithoutAnimations(newStyle) {

package/lib/{reanimated2 → src/reanimated2}/index.js

@@ -2,9 +2,11 @@ export * from './core';
 export * from './hook';
 export * from './animation';
 export * from './interpolation';
+export * from './interpolateColor';
 export * from './Easing';
 export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
 export * from './utils';
+export * from './commonTypes';

package/lib/src/reanimated2/interpolateColor.js

@@ -0,0 +1,98 @@
+import { hsvToColor, RGBtoHSV, rgbaColor, processColor, red, green, blue, opacity, } from './Colors';
+import { makeMutable } from './core';
+import { interpolate } from './interpolation';
+// @ts-ignore JS file
+import { Extrapolate } from '../reanimated1/derived';
+import { useSharedValue } from './hook/useSharedValue';
+const interpolateColorsHSV = (value, inputRange, colors) => {
+    'worklet';
+    const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);
+    const s = interpolate(value, inputRange, colors.s, Extrapolate.CLAMP);
+    const v = interpolate(value, inputRange, colors.v, Extrapolate.CLAMP);
+    return hsvToColor(h, s, v);
+};
+const interpolateColorsRGB = (value, inputRange, colors) => {
+    'worklet';
+    const r = interpolate(value, inputRange, colors.r, Extrapolate.CLAMP);
+    const g = interpolate(value, inputRange, colors.g, Extrapolate.CLAMP);
+    const b = interpolate(value, inputRange, colors.b, Extrapolate.CLAMP);
+    const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
+    return rgbaColor(r, g, b, a);
+};
+const getInterpolateRGB = (colors) => {
+    'worklet';
+    const r = [];
+    const g = [];
+    const b = [];
+    const a = [];
+    for (let i = 0; i < colors.length; ++i) {
+        const color = colors[i];
+        const proocessedColor = processColor(color);
+        // explicit check in case if processedColor is 0
+        if (proocessedColor !== null && proocessedColor !== undefined) {
+            r.push(red(proocessedColor));
+            g.push(green(proocessedColor));
+            b.push(blue(proocessedColor));
+            a.push(opacity(proocessedColor));
+        }
+    }
+    return { r, g, b, a };
+};
+const getInterpolateHSV = (colors) => {
+    'worklet';
+    const h = [];
+    const s = [];
+    const v = [];
+    for (let i = 0; i < colors.length; ++i) {
+        const color = colors[i];
+        const proocessedColor = RGBtoHSV(processColor(color));
+        if (proocessedColor) {
+            h.push(proocessedColor.h);
+            s.push(proocessedColor.s);
+            v.push(proocessedColor.v);
+        }
+    }
+    return { h, s, v };
+};
+export const interpolateColor = (value, inputRange, outputRange, colorSpace = 'RGB') => {
+    'worklet';
+    if (colorSpace === 'HSV') {
+        return interpolateColorsHSV(value, inputRange, getInterpolateHSV(outputRange));
+    }
+    else if (colorSpace === 'RGB') {
+        return interpolateColorsRGB(value, inputRange, getInterpolateRGB(outputRange));
+    }
+    throw new Error(`Invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']`);
+};
+export var ColorSpace;
+(function (ColorSpace) {
+    ColorSpace[ColorSpace["RGB"] = 0] = "RGB";
+    ColorSpace[ColorSpace["HSV"] = 1] = "HSV";
+})(ColorSpace || (ColorSpace = {}));
+export function useInterpolateConfig(inputRange, outputRange, colorSpace = ColorSpace.RGB) {
+    return useSharedValue({
+        inputRange,
+        outputRange,
+        colorSpace,
+        cache: makeMutable(null),
+    });
+}
+export const interpolateSharableColor = (value, interpolateConfig) => {
+    'worklet';
+    let colors = interpolateConfig.value.cache.value;
+    if (interpolateConfig.value.colorSpace === ColorSpace.RGB) {
+        if (!colors) {
+            colors = getInterpolateRGB(interpolateConfig.value.outputRange);
+            interpolateConfig.value.cache.value = colors;
+        }
+        return interpolateColorsRGB(value, interpolateConfig.value.inputRange, colors);
+    }
+    else if (interpolateConfig.value.colorSpace === ColorSpace.HSV) {
+        if (!colors) {
+            colors = getInterpolateHSV(interpolateConfig.value.outputRange);
+            interpolateConfig.value.cache.value = colors;
+        }
+        return interpolateColorsHSV(value, interpolateConfig.value.inputRange, colors);
+    }
+    throw new Error(`Invalid color space provided: ${interpolateConfig.value.colorSpace}. Supported values are: ['RGB', 'HSV']`);
+};

package/lib/{reanimated2 → src/reanimated2}/js-reanimated/JSReanimated.js

@@ -1,6 +1,6 @@
 import MapperRegistry from './MapperRegistry';
-import MutableValue from './MutableValue';
 import Mapper from './Mapper';
+import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
 export default class JSReanimated extends NativeReanimated {
     constructor() {
@@ -72,4 +72,7 @@ export default class JSReanimated extends NativeReanimated {
     unregisterEventHandler(_) {
         // noop
     }
+    enableLayoutAnimations() {
+        console.warn('[Reanimated] enableLayoutAnimations is not available for WEB yet');
+    }
 }

package/lib/{reanimated2 → src/reanimated2}/js-reanimated/Mapper.js

@@ -21,7 +21,10 @@ export default class Mapper {
     extractMutablesFromArray(array) {
         const res = [];
         function extractMutables(value) {
-            if (value instanceof MutableValue) {
+            if (value == null) {
+                // return;
+            }
+            else if (value instanceof MutableValue) {
                 res.push(value);
             }
             else if (Array.isArray(value)) {

package/lib/{reanimated2 → src/reanimated2}/js-reanimated/index.js

@@ -20,6 +20,9 @@ if (shouldBeUseWeb()) {
     global._scrollTo = () => {
         console.warn("[Reanimated] You can't use 'scrollTo' method with Chrome Debugger or with web version");
     };
+    global._setGestureState = () => {
+        console.warn("[Reanimated] You can't use 'setGestureState' method with Chrome Debugger or with web version");
+    };
 }
 export const _updatePropsJS = (updates, viewRef) => {
     if (viewRef._component) {

package/lib/{reanimated2 → src/reanimated2}/layoutReanimation/LayoutAnimationRepository.js

@@ -1,6 +1,8 @@
 /* global _stopObservingProgress, _startObservingProgress */
 import { runOnUI } from '../core';
 import { withStyleAnimation } from '../animation/styleAnimation';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 runOnUI(() => {
     'worklet';
     const configs = {};
@@ -34,12 +36,19 @@ runOnUI(() => {
                 for (const key in layoutAnimation) {
                     currentAnimation[key] = layoutAnimation[key];
                 }
-                enteringAnimationForTag[tag] = null;
             }
             const sv = configs[tag].sv;
             _stopObservingProgress(tag, false);
             _startObservingProgress(tag, sv);
-            sv._value = Object.assign({}, sv._value, style.initialValues);
+            const backupColor = {};
+            for (const key in style.initialValues) {
+                if (ColorProperties.includes(key)) {
+                    const value = style.initialValues[key];
+                    backupColor[key] = value;
+                    style.initialValues[key] = processColor(value);
+                }
+            }
+            sv.value = Object.assign({}, sv._value, style.initialValues);
             _stopObservingProgress(tag, false);
             const animation = withStyleAnimation(currentAnimation);
             animation.callback = (finished) => {
@@ -47,10 +56,10 @@ runOnUI(() => {
                     _stopObservingProgress(tag, finished);
                 }
                 style.callback && style.callback(finished);
-                if (type === 'entering') {
-                    enteringAnimationForTag[tag] = null;
-                }
             };
+            if (backupColor) {
+                configs[tag].sv._value = Object.assign(Object.assign({}, configs[tag].sv.value), backupColor);
+            }
             configs[tag].sv.value = animation;
             _startObservingProgress(tag, sv);
         },

package/lib/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/src/reanimated2/layoutReanimation/defaultAnimations/Default.js

@@ -0,0 +1,36 @@
+export const DefaultLayout = (values) => {
+    'worklet';
+    return {
+        initialValues: {
+            originX: values.targetOriginX,
+            originY: values.targetOriginY,
+            width: values.targetWidth,
+            height: values.targetHeight,
+        },
+        animations: {},
+    };
+};
+export const DefaultEntering = (values) => {
+    'worklet';
+    return {
+        initialValues: {
+            originX: values.targetOriginX,
+            originY: values.targetOriginY,
+            width: values.targetWidth,
+            height: values.targetHeight,
+        },
+        animations: {},
+    };
+};
+export const DefaultExiting = (values) => {
+    'worklet';
+    return {
+        initialValues: {
+            originX: values.currentOriginX,
+            originY: values.currentOriginY,
+            width: values.currentWidth,
+            height: values.currentHeight,
+        },
+        animations: {},
+    };
+};

package/lib/{reanimated2 → src/reanimated2}/layoutReanimation/defaultAnimations/Flip.js

@@ -14,7 +14,7 @@ export class FlipInXUp extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateX: '90deg' },
-                            { translateY: -targetValues.height },
+                            { translateY: -targetValues.targetHeight },
                         ],
                     },
                     animations: {
@@ -48,7 +48,7 @@ export class FlipInYLeft extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateY: '-90deg' },
-                            { translateX: -targetValues.width },
+                            { translateX: -targetValues.targetWidth },
                         ],
                     },
                     animations: {
@@ -82,7 +82,7 @@ export class FlipInXDown extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateX: '-90deg' },
-                            { translateY: targetValues.height },
+                            { translateY: targetValues.targetHeight },
                         ],
                     },
                     animations: {
@@ -116,7 +116,7 @@ export class FlipInYRight extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateY: '90deg' },
-                            { translateX: targetValues.width },
+                            { translateX: targetValues.targetWidth },
                         ],
                     },
                     animations: {
@@ -216,7 +216,7 @@ export class FlipOutXUp extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateX: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateY: delayFunction(delay, animation(-targetValues.height, config)),
+                                translateY: delayFunction(delay, animation(-targetValues.currentHeight, config)),
                             },
                         ],
                     },
@@ -252,7 +252,7 @@ export class FlipOutYLeft extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateY: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-targetValues.width, config)),
+                                translateX: delayFunction(delay, animation(-targetValues.currentWidth, config)),
                             },
                         ],
                     },
@@ -288,7 +288,7 @@ export class FlipOutXDown extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateX: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateY: delayFunction(delay, animation(targetValues.height, config)),
+                                translateY: delayFunction(delay, animation(targetValues.currentHeight, config)),
                             },
                         ],
                     },
@@ -324,7 +324,7 @@ export class FlipOutYRight extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateY: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(targetValues.width, config)),
+                                translateX: delayFunction(delay, animation(targetValues.currentWidth, config)),
                             },
                         ],
                     },

package/lib/{reanimated2 → src/reanimated2}/layoutReanimation/defaultAnimations/Rotate.js

@@ -22,8 +22,8 @@ export class RotateInDownLeft extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '-90deg' },
-                            { translateX: values.width / 2 - values.height / 2 },
-                            { translateY: -(values.width / 2 - values.height / 2) },
+                            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+                            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
                         ],
                     },
                     callback: callback,
@@ -58,8 +58,8 @@ export class RotateInDownRight extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '90deg' },
-                            { translateX: -(values.width / 2 - values.height / 2) },
-                            { translateY: -(values.width / 2 - values.height / 2) },
+                            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+                            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
                         ],
                     },
                     callback: callback,
@@ -94,8 +94,8 @@ export class RotateInUpLeft extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '90deg' },
-                            { translateX: values.width / 2 - values.height / 2 },
-                            { translateY: values.width / 2 - values.height / 2 },
+                            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+                            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
                         ],
                     },
                     callback: callback,
@@ -130,8 +130,8 @@ export class RotateInUpRight extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '-90deg' },
-                            { translateX: -(values.width / 2 - values.height / 2) },
-                            { translateY: values.width / 2 - values.height / 2 },
+                            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+                            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
                         ],
                     },
                     callback: callback,
@@ -159,10 +159,10 @@ export class RotateOutDownLeft extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateX: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateY: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                         ],
                     },
@@ -195,10 +195,10 @@ export class RotateOutDownRight extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateX: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateY: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                         ],
                     },
@@ -231,10 +231,10 @@ export class RotateOutUpLeft extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateX: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateY: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                         ],
                     },
@@ -267,10 +267,10 @@ export class RotateOutUpRight extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateX: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateY: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                         ],
                     },

package/lib/{reanimated2 → src/reanimated2}/layoutReanimation/defaultAnimations/Slide.js

@@ -13,10 +13,10 @@ export class SlideInRight extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
                     },
                     initialValues: {
-                        originX: values.originX + width,
+                        originX: values.targetOriginX + width,
                     },
                     callback: callback,
                 };
@@ -39,10 +39,10 @@ export class SlideInLeft extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
                     },
                     initialValues: {
-                        originX: values.originX - width,
+                        originX: values.targetOriginX - width,
                     },
                     callback: callback,
                 };
@@ -65,10 +65,10 @@ export class SlideOutRight extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(Math.max(values.originX + width, width), config)),
+                        originX: delayFunction(delay, animation(Math.max(values.currentOriginX + width, width), config)),
                     },
                     initialValues: {
-                        originX: values.originX,
+                        originX: values.currentOriginX,
                     },
                     callback: callback,
                 };
@@ -91,10 +91,10 @@ export class SlideOutLeft extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(Math.min(values.originX - width, -width), config)),
+                        originX: delayFunction(delay, animation(Math.min(values.currentOriginX - width, -width), config)),
                     },
                     initialValues: {
-                        originX: values.originX,
+                        originX: values.currentOriginX,
                     },
                     callback: callback,
                 };
@@ -117,10 +117,10 @@ export class SlideInUp extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(values.originY, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
                     },
                     initialValues: {
-                        originY: height,
+                        originY: -height,
                     },
                     callback: callback,
                 };
@@ -143,10 +143,10 @@ export class SlideInDown extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(values.originY, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
                     },
                     initialValues: {
-                        originY: values.originY + height,
+                        originY: values.targetOriginY + height,
                     },
                     callback: callback,
                 };
@@ -169,9 +169,9 @@ export class SlideOutUp extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(Math.min(values.originY - height, -height), config)),
+                        originY: delayFunction(delay, animation(Math.min(values.currentOriginY - height, -height), config)),
                     },
-                    initialValues: { originY: values.originY },
+                    initialValues: { originY: values.currentOriginY },
                     callback: callback,
                 };
             };
@@ -193,9 +193,9 @@ export class SlideOutDown extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(Math.max(values.originY + height, height), config)),
+                        originY: delayFunction(delay, animation(Math.max(values.currentOriginY + height, height), config)),
                     },
-                    initialValues: { originY: values.originY },
+                    initialValues: { originY: values.currentOriginY },
                     callback: callback,
                 };
             };

package/lib/{reanimated2 → src/reanimated2}/layoutReanimation/defaultAnimations/Zoom.js

@@ -191,7 +191,7 @@ export class ZoomInEasyUp extends ComplexAnimationBuilder {
                         ],
                     },
                     initialValues: {
-                        transform: [{ translateY: -values.height }, { scale: 0 }],
+                        transform: [{ translateY: -values.targetHeight }, { scale: 0 }],
                     },
                     callback: callback,
                 };
@@ -220,7 +220,7 @@ export class ZoomInEasyDown extends ComplexAnimationBuilder {
                         ],
                     },
                     initialValues: {
-                        transform: [{ translateY: values.height }, { scale: 0 }],
+                        transform: [{ translateY: values.targetHeight }, { scale: 0 }],
                     },
                     callback: callback,
                 };
@@ -417,7 +417,7 @@ export class ZoomOutEasyUp extends ComplexAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, animation(-values.height, config)),
+                                translateY: delayFunction(delay, animation(-values.currentHeight, config)),
                             },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
@@ -448,7 +448,7 @@ export class ZoomOutEasyDown extends ComplexAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, animation(values.height, config)),
+                                translateY: delayFunction(delay, animation(values.currentHeight, config)),
                             },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],