react-native-reanimated 2.3.0-alpha.3 → 2.3.0-beta.4

package/lib/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.js

@@ -0,0 +1,125 @@
+import { withTiming, withSpring } from '../../animation';
+import { BaseAnimationBuilder } from './BaseAnimationBuilder';
+export class ComplexAnimationBuilder extends BaseAnimationBuilder {
+    static easing(easingFunction) {
+        const instance = this.createInstance();
+        return instance.easing(easingFunction);
+    }
+    easing(easingFunction) {
+        this.easingV = easingFunction;
+        return this;
+    }
+    static rotate(degree) {
+        const instance = this.createInstance();
+        return instance.rotate(degree);
+    }
+    rotate(degree) {
+        this.rotateV = degree;
+        return this;
+    }
+    static springify() {
+        const instance = this.createInstance();
+        return instance.springify();
+    }
+    springify() {
+        this.type = withSpring;
+        return this;
+    }
+    static damping(damping) {
+        const instance = this.createInstance();
+        return instance.damping(damping);
+    }
+    damping(damping) {
+        this.dampingV = damping;
+        return this;
+    }
+    static mass(mass) {
+        const instance = this.createInstance();
+        return instance.mass(mass);
+    }
+    mass(mass) {
+        this.massV = mass;
+        return this;
+    }
+    static stiffness(stiffness) {
+        const instance = this.createInstance();
+        return instance.stiffness(stiffness);
+    }
+    stiffness(stiffness) {
+        this.stiffnessV = stiffness;
+        return this;
+    }
+    static overshootClamping(overshootClamping) {
+        const instance = this.createInstance();
+        return instance.overshootClamping(overshootClamping);
+    }
+    overshootClamping(overshootClamping) {
+        this.overshootClampingV = overshootClamping;
+        return this;
+    }
+    static restDisplacementThreshold(restDisplacementThreshold) {
+        const instance = this.createInstance();
+        return instance.restDisplacementThreshold(restDisplacementThreshold);
+    }
+    restDisplacementThreshold(restDisplacementThreshold) {
+        this.restDisplacementThresholdV = restDisplacementThreshold;
+        return this;
+    }
+    static restSpeedThreshold(restSpeedThreshold) {
+        const instance = this.createInstance();
+        return instance.restSpeedThreshold(restSpeedThreshold);
+    }
+    restSpeedThreshold(restSpeedThreshold) {
+        this.restSpeedThresholdV = restSpeedThreshold;
+        return this;
+    }
+    getAnimationAndConfig() {
+        const duration = this.durationV;
+        const easing = this.easingV;
+        const rotate = this.rotateV;
+        const type = this.type ? this.type : withTiming;
+        const damping = this.dampingV;
+        const mass = this.massV;
+        const stiffness = this.stiffnessV;
+        const overshootClamping = this.overshootClampingV;
+        const restDisplacementThreshold = this.restDisplacementThresholdV;
+        const restSpeedThreshold = this.restSpeedThresholdV;
+        const animation = type;
+        const config = {};
+        if (type === withTiming) {
+            if (easing) {
+                config.easing = easing;
+            }
+            if (duration) {
+                config.duration = duration;
+            }
+            if (rotate) {
+                config.rotate = rotate;
+            }
+        }
+        else {
+            if (damping) {
+                config.damping = damping;
+            }
+            if (mass) {
+                config.mass = mass;
+            }
+            if (stiffness) {
+                config.stiffness = stiffness;
+            }
+            if (overshootClamping) {
+                config.overshootClamping = overshootClamping;
+            }
+            if (restDisplacementThreshold) {
+                config.restDisplacementThreshold = restDisplacementThreshold;
+            }
+            if (restSpeedThreshold) {
+                config.restSpeedThreshold = restSpeedThreshold;
+            }
+            if (rotate) {
+                config.rotate = rotate;
+            }
+        }
+        return [animation, config];
+    }
+}

package/lib/reanimated2/layoutReanimation/animationBuilder/index.js

@@ -1,4 +1,3 @@
 export { BaseAnimationBuilder } from './BaseAnimationBuilder';
-export { BaseBounceAnimationBuilder } from './BaseBounceAnimationBuilder';
-export { LayoutAnimationBuilder, Layout } from './LayoutAnimationBuilder';
+export { ComplexAnimationBuilder } from './ComplexAnimationBuilder';
 export { Keyframe } from './Keyframe';

package/lib/reanimated2/layoutReanimation/defaultAnimations/Bounce.js

@@ -1,14 +1,14 @@
-import { BaseBounceAnimationBuilder } from '../animationBuilder/BaseBounceAnimationBuilder';
 import { withSequence, withTiming } from '../../animation';
 import { Dimensions } from 'react-native';
+import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
 const { width, height } = Dimensions.get('window');
-export class BounceIn extends BaseBounceAnimationBuilder {
+export class BounceIn extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -16,7 +16,7 @@ export class BounceIn extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                scale: delayFunction(delay, withSequence(withTiming(1.2, { duration: duration }), withTiming(0.9, { duration: (duration * 100) / 250 }), withTiming(1.1, { duration: (duration * 100) / 250 }), withTiming(1, { duration: (duration * 100) / 250 }))),
+                                scale: delayFunction(delay, withSequence(withTiming(1.2, { duration: duration * 0.55 }), withTiming(0.9, { duration: duration * 0.15 }), withTiming(1.1, { duration: duration * 0.15 }), withTiming(1, { duration: duration * 0.15 }))),
                             },
                         ],
                     },
@@ -31,14 +31,21 @@ export class BounceIn extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceIn();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceInDown extends BaseBounceAnimationBuilder {
+export class BounceInDown extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -46,7 +53,7 @@ export class BounceInDown extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, withSequence(withTiming(-20, { duration: duration }), withTiming(10, { duration: (duration * 100) / 250 }), withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(0, { duration: (duration * 100) / 250 }))),
+                                translateY: delayFunction(delay, withSequence(withTiming(-20, { duration: duration * 0.55 }), withTiming(10, { duration: duration * 0.15 }), withTiming(-10, { duration: duration * 0.15 }), withTiming(0, { duration: duration * 0.15 }))),
                             },
                         ],
                     },
@@ -65,14 +72,21 @@ export class BounceInDown extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceInDown();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceInUp extends BaseBounceAnimationBuilder {
+export class BounceInUp extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -80,7 +94,7 @@ export class BounceInUp extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, withSequence(withTiming(20, { duration: duration }), withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(10, { duration: (duration * 100) / 250 }), withTiming(0, { duration: (duration * 100) / 250 }))),
+                                translateY: delayFunction(delay, withSequence(withTiming(20, { duration: duration * 0.55 }), withTiming(-10, { duration: duration * 0.15 }), withTiming(10, { duration: duration * 0.15 }), withTiming(0, { duration: duration * 0.15 }))),
                             },
                         ],
                     },
@@ -95,14 +109,21 @@ export class BounceInUp extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceInUp();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceInLeft extends BaseBounceAnimationBuilder {
+export class BounceInLeft extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -110,7 +131,7 @@ export class BounceInLeft extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateX: delayFunction(delay, withSequence(withTiming(20, { duration: duration }), withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(10, { duration: (duration * 100) / 250 }), withTiming(0, { duration: (duration * 100) / 250 }))),
+                                translateX: delayFunction(delay, withSequence(withTiming(20, { duration: duration * 0.55 }), withTiming(-10, { duration: duration * 0.15 }), withTiming(10, { duration: duration * 0.15 }), withTiming(0, { duration: duration * 0.15 }))),
                             },
                         ],
                     },
@@ -125,14 +146,21 @@ export class BounceInLeft extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceInLeft();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceInRight extends BaseBounceAnimationBuilder {
+export class BounceInRight extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -140,7 +168,7 @@ export class BounceInRight extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateX: delayFunction(delay, withSequence(withTiming(-20, { duration: duration }), withTiming(10, { duration: (duration * 100) / 250 }), withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(0, { duration: (duration * 100) / 250 }))),
+                                translateX: delayFunction(delay, withSequence(withTiming(-20, { duration: duration * 0.55 }), withTiming(10, { duration: duration * 0.15 }), withTiming(-10, { duration: duration * 0.15 }), withTiming(0, { duration: duration * 0.15 }))),
                             },
                         ],
                     },
@@ -155,14 +183,21 @@ export class BounceInRight extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceInRight();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceOut extends BaseBounceAnimationBuilder {
+export class BounceOut extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -170,7 +205,7 @@ export class BounceOut extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                scale: delayFunction(delay, withSequence(withTiming(1.1, { duration: (duration * 100) / 250 }), withTiming(0.9, { duration: (duration * 100) / 250 }), withTiming(1.2, { duration: (duration * 100) / 250 }), withTiming(0, { duration: duration }))),
+                                scale: delayFunction(delay, withSequence(withTiming(1.1, { duration: duration * 0.15 }), withTiming(0.9, { duration: duration * 0.15 }), withTiming(1.2, { duration: duration * 0.15 }), withTiming(0, { duration: duration * 0.55 }))),
                             },
                         ],
                     },
@@ -185,14 +220,21 @@ export class BounceOut extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceOut();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceOutDown extends BaseBounceAnimationBuilder {
+export class BounceOutDown extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -200,8 +242,8 @@ export class BounceOutDown extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, withSequence(withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(10, { duration: (duration * 100) / 250 }), withTiming(-20, { duration: (duration * 100) / 250 }), withTiming(height, {
-                                    duration: duration,
+                                translateY: delayFunction(delay, withSequence(withTiming(-10, { duration: duration * 0.15 }), withTiming(10, { duration: duration * 0.15 }), withTiming(-20, { duration: duration * 0.15 }), withTiming(height, {
+                                    duration: duration * 0.55,
                                 }))),
                             },
                         ],
@@ -217,14 +259,21 @@ export class BounceOutDown extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceOutDown();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceOutUp extends BaseBounceAnimationBuilder {
+export class BounceOutUp extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -232,8 +281,8 @@ export class BounceOutUp extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, withSequence(withTiming(10, { duration: (duration * 100) / 250 }), withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(20, { duration: (duration * 100) / 250 }), withTiming(-height, {
-                                    duration: duration,
+                                translateY: delayFunction(delay, withSequence(withTiming(10, { duration: duration * 0.15 }), withTiming(-10, { duration: duration * 0.15 }), withTiming(20, { duration: duration * 0.15 }), withTiming(-height, {
+                                    duration: duration * 0.55,
                                 }))),
                             },
                         ],
@@ -249,14 +298,21 @@ export class BounceOutUp extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceOutUp();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceOutLeft extends BaseBounceAnimationBuilder {
+export class BounceOutLeft extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -264,8 +320,8 @@ export class BounceOutLeft extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateX: delayFunction(delay, withSequence(withTiming(10, { duration: (duration * 100) / 250 }), withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(20, { duration: (duration * 100) / 250 }), withTiming(-width, {
-                                    duration: duration,
+                                translateX: delayFunction(delay, withSequence(withTiming(10, { duration: duration * 0.15 }), withTiming(-10, { duration: duration * 0.15 }), withTiming(20, { duration: duration * 0.15 }), withTiming(-width, {
+                                    duration: duration * 0.55,
                                 }))),
                             },
                         ],
@@ -281,14 +337,21 @@ export class BounceOutLeft extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceOutLeft();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }
-export class BounceOutRight extends BaseBounceAnimationBuilder {
+export class BounceOutRight extends BaseAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
-            const delay = this.delayV;
-            const duration = this.durationV ? this.durationV : 250;
+            const delay = this.getDelay();
+            const duration = this.getDuration();
             const callback = this.callbackV;
             return () => {
                 'worklet';
@@ -296,8 +359,8 @@ export class BounceOutRight extends BaseBounceAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateX: delayFunction(delay, withSequence(withTiming(-10, { duration: (duration * 100) / 250 }), withTiming(10, { duration: (duration * 100) / 250 }), withTiming(-20, { duration: (duration * 100) / 250 }), withTiming(width, {
-                                    duration: duration,
+                                translateX: delayFunction(delay, withSequence(withTiming(-10, { duration: duration * 0.15 }), withTiming(10, { duration: duration * 0.15 }), withTiming(-20, { duration: duration * 0.15 }), withTiming(width, {
+                                    duration: duration * 0.55,
                                 }))),
                             },
                         ],
@@ -313,4 +376,11 @@ export class BounceOutRight extends BaseBounceAnimationBuilder {
     static createInstance() {
         return new BounceOutRight();
     }
+    static getDuration() {
+        return 600;
+    }
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
+    }
 }

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

@@ -1,7 +1,12 @@
-export const DefaultLayout = (_) => {
+export const DefaultLayout = (values) => {
     'worklet';
     return {
-        initialValues: {},
+        initialValues: {
+            originX: values.originX,
+            originY: values.originY,
+            width: values.width,
+            height: values.height,
+        },
         animations: {},
     };
 };

package/lib/reanimated2/layoutReanimation/defaultAnimations/Fade.js

@@ -1,12 +1,12 @@
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
-export class FadeIn extends BaseAnimationBuilder {
+import { ComplexAnimationBuilder } from '../animationBuilder';
+export class FadeIn extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return (_) => {
                 'worklet';
                 return {
@@ -25,14 +25,14 @@ export class FadeIn extends BaseAnimationBuilder {
         return new FadeIn();
     }
 }
-export class FadeInRight extends BaseAnimationBuilder {
+export class FadeInRight extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {
@@ -55,14 +55,14 @@ export class FadeInRight extends BaseAnimationBuilder {
         return new FadeInRight();
     }
 }
-export class FadeInLeft extends BaseAnimationBuilder {
+export class FadeInLeft extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {
@@ -85,14 +85,14 @@ export class FadeInLeft extends BaseAnimationBuilder {
         return new FadeInLeft();
     }
 }
-export class FadeInUp extends BaseAnimationBuilder {
+export class FadeInUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {
@@ -115,14 +115,14 @@ export class FadeInUp extends BaseAnimationBuilder {
         return new FadeInUp();
     }
 }
-export class FadeInDown extends BaseAnimationBuilder {
+export class FadeInDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {
@@ -145,14 +145,14 @@ export class FadeInDown extends BaseAnimationBuilder {
         return new FadeInDown();
     }
 }
-export class FadeOut extends BaseAnimationBuilder {
+export class FadeOut extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return (_) => {
                 'worklet';
                 return {
@@ -171,14 +171,14 @@ export class FadeOut extends BaseAnimationBuilder {
         return new FadeOut();
     }
 }
-export class FadeOutRight extends BaseAnimationBuilder {
+export class FadeOutRight extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {
@@ -201,14 +201,14 @@ export class FadeOutRight extends BaseAnimationBuilder {
         return new FadeOutRight();
     }
 }
-export class FadeOutLeft extends BaseAnimationBuilder {
+export class FadeOutLeft extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {
@@ -231,14 +231,14 @@ export class FadeOutLeft extends BaseAnimationBuilder {
         return new FadeOutLeft();
     }
 }
-export class FadeOutUp extends BaseAnimationBuilder {
+export class FadeOutUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {
@@ -261,14 +261,14 @@ export class FadeOutUp extends BaseAnimationBuilder {
         return new FadeOutUp();
     }
 }
-export class FadeOutDown extends BaseAnimationBuilder {
+export class FadeOutDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
             const delayFunction = this.getDelayFunction();
             const [animation, config] = this.getAnimationAndConfig();
             const callback = this.callbackV;
-            const delay = this.delayV;
+            const delay = this.getDelay();
             return () => {
                 'worklet';
                 return {