react-native-fast-animate 0.1.0

package/src/animations.ts

@@ -0,0 +1,1421 @@
+import { Animated, Easing } from 'react-native';
+import type { AnimationType } from './types';
+
+export const getAnimationConfig = (
+  type: AnimationType,
+  animatedValue: Animated.Value,
+  duration: number,
+  useNativeDriver: boolean,
+  damping: number,
+  stiffness: number
+) => {
+  const commonTiming = (toValue: number, d = duration) =>
+    Animated.timing(animatedValue, {
+      toValue,
+      duration: d,
+      useNativeDriver,
+      easing: Easing.bezier(0.42, 0, 0.58, 1),
+    });
+
+  const attentionSeeker = (values: number[]) => {
+    const segment = duration / values.length;
+    return Animated.sequence(values.map((v) => commonTiming(v, segment)));
+  };
+
+  switch (type) {
+    case 'bounce':
+    case 'bounceIn':
+    case 'bounceInUp':
+    case 'bounceInDown':
+    case 'bounceInLeft':
+    case 'bounceInRight':
+    case 'flingInLeft':
+    case 'flingInRight':
+    case 'flingInUp':
+    case 'flingInDown':
+    case 'bounceInTopLeft':
+    case 'bounceInTopRight':
+    case 'bounceInBottomLeft':
+    case 'bounceInBottomRight':
+      return Animated.spring(animatedValue, {
+        toValue: 1,
+        friction: damping,
+        tension: stiffness,
+        useNativeDriver,
+      });
+    case 'pulse':
+    case 'pulseAlt':
+      return Animated.sequence([
+        commonTiming(1, duration / 2),
+        commonTiming(0, duration / 2),
+      ]);
+    case 'shake':
+    case 'shakeX':
+    case 'shakeY':
+    case 'headShake':
+      return attentionSeeker([0.1, -0.1, 0.1, -0.1, 0]);
+    case 'swing':
+    case 'wobble':
+    case 'jello':
+    case 'tada':
+      return attentionSeeker([0.2, -0.2, 0.2, -0.2, 0.1, -0.1, 0]);
+    case 'heartBeat':
+      return Animated.sequence([
+        commonTiming(1, duration * 0.14),
+        commonTiming(0, duration * 0.14),
+        commonTiming(1, duration * 0.14),
+        commonTiming(0, duration * 0.14),
+      ]);
+    case 'rubberBand':
+      return attentionSeeker([1.25, 0.75, 1.15, 0.95, 1.05, 1]);
+    case 'flash':
+      return attentionSeeker([0, 1, 0, 1, 0]);
+    case 'hinge':
+      return Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 0.5,
+          duration: duration * 0.4,
+          useNativeDriver,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: duration * 0.6,
+          useNativeDriver,
+        }),
+      ]);
+    case 'bounceInfinite':
+    case 'rotateInfinite':
+    case 'slideInfinite':
+    case 'flipInfinite':
+    case 'flipInfiniteX':
+    case 'flipInfiniteY':
+    case 'swingInfinite':
+    case 'wobbleInfinite':
+    case 'pulseInfinite':
+    case 'jelloInfinite':
+    case 'shimmer':
+    case 'shimmerSlow':
+    case 'float':
+    case 'floatLeft':
+    case 'floatRight':
+    case 'floatUp':
+    case 'floatDown':
+    case 'orbit':
+    case 'satellite':
+      return commonTiming(1);
+    case 'newspaper':
+      return Animated.parallel([
+        commonTiming(1),
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration,
+          useNativeDriver,
+          easing: Easing.out(Easing.quad),
+        }),
+      ]);
+    case 'dance':
+      return attentionSeeker([0.1, -0.1, 0.1, -0.1, 0.2, -0.2, 0]);
+    case 'jerk':
+      return attentionSeeker([-0.1, 0.1, -0.1, 0.1, 0]);
+    case 'panic':
+      return attentionSeeker([0.05, -0.05, 0.05, -0.05, 0.1, -0.1, 0]);
+    case 'popIn':
+    case 'popInUp':
+    case 'popInDown':
+    case 'popInLeft':
+    case 'popInRight':
+    case 'fallIn':
+    case 'raiseIn':
+      return Animated.spring(animatedValue, {
+        toValue: 1,
+        friction: 8,
+        tension: 40,
+        useNativeDriver,
+      });
+    case 'vibrateFast':
+      return attentionSeeker([0.05, -0.05, 0.05, -0.05, 0]);
+    case 'vibrateSlow':
+      return attentionSeeker([0.2, -0.2, 0.2, -0.2, 0]);
+    case 'pulseFast':
+      return Animated.sequence([
+        commonTiming(1, duration / 4),
+        commonTiming(0, duration / 4),
+      ]);
+    case 'pulseSlow':
+      return Animated.sequence([
+        commonTiming(1, duration),
+        commonTiming(0, duration),
+      ]);
+    case 'flashFast':
+      return attentionSeeker([0, 1, 0, 1, 0, 1, 0]);
+    default:
+      return commonTiming(1);
+  }
+};
+
+export const getAnimationStyle = (
+  type: AnimationType,
+  animatedValue: Animated.Value
+): any => {
+  const t = (input: number[], output: any[]) =>
+    animatedValue.interpolate({ inputRange: input, outputRange: output });
+  const transforms: any[] = [];
+
+  switch (type) {
+    // FADES
+    case 'fadeIn':
+      return { opacity: animatedValue };
+    case 'fadeInUp':
+      transforms.push({ translateY: t([0, 1], [40, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeInDown':
+      transforms.push({ translateY: t([0, 1], [-40, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeInLeft':
+      transforms.push({ translateX: t([0, 1], [-40, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeInRight':
+      transforms.push({ translateX: t([0, 1], [40, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeInTopLeft':
+      transforms.push({
+        translateX: t([0, 1], [-100, 0]),
+        translateY: t([0, 1], [-100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeInTopRight':
+      transforms.push({
+        translateX: t([0, 1], [100, 0]),
+        translateY: t([0, 1], [-100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeInBottomLeft':
+      transforms.push({
+        translateX: t([0, 1], [-100, 0]),
+        translateY: t([0, 1], [100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeInBottomRight':
+      transforms.push({
+        translateX: t([0, 1], [100, 0]),
+        translateY: t([0, 1], [100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'fadeOut':
+      return { opacity: t([0, 1], [1, 0]) };
+    case 'fadeOutUp':
+      transforms.push({ translateY: t([0, 1], [0, -40]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'fadeOutDown':
+      transforms.push({ translateY: t([0, 1], [0, 40]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'fadeOutLeft':
+      transforms.push({ translateX: t([0, 1], [0, -40]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'fadeOutRight':
+      transforms.push({ translateX: t([0, 1], [0, 40]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // SLIDES
+    case 'slideInUp':
+      transforms.push({ translateY: t([0, 1], [500, 0]) });
+      return { transform: transforms };
+    case 'slideInDown':
+      transforms.push({ translateY: t([0, 1], [-500, 0]) });
+      return { transform: transforms };
+    case 'slideInLeft':
+      transforms.push({ translateX: t([0, 1], [-500, 0]) });
+      return { transform: transforms };
+    case 'slideInRight':
+      transforms.push({ translateX: t([0, 1], [500, 0]) });
+      return { transform: transforms };
+    case 'slideInTopLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        translateY: t([0, 1], [-500, 0]),
+      });
+      return { transform: transforms };
+    case 'slideInTopRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        translateY: t([0, 1], [-500, 0]),
+      });
+      return { transform: transforms };
+    case 'slideInBottomLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        translateY: t([0, 1], [500, 0]),
+      });
+      return { transform: transforms };
+    case 'slideInBottomRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        translateY: t([0, 1], [500, 0]),
+      });
+      return { transform: transforms };
+    case 'slideOutUp':
+      transforms.push({ translateY: t([0, 1], [0, -500]) });
+      return { transform: transforms };
+    case 'slideOutDown':
+      transforms.push({ translateY: t([0, 1], [0, 500]) });
+      return { transform: transforms };
+    case 'slideOutLeft':
+      transforms.push({ translateX: t([0, 1], [0, -500]) });
+      return { transform: transforms };
+    case 'slideOutRight':
+      transforms.push({ translateX: t([0, 1], [0, 500]) });
+      return { transform: transforms };
+
+    // ZOOMS
+    case 'zoomIn':
+      transforms.push({ scale: t([0, 1], [0, 1]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'zoomInUp':
+      transforms.push({
+        scale: t([0, 0.6, 1], [0.1, 0.47, 1]),
+        translateY: t([0, 0.6, 1], [1000, -60, 0]),
+      });
+      return { opacity: t([0, 0.6, 1], [0, 1, 1]), transform: transforms };
+    case 'zoomInDown':
+      transforms.push({
+        scale: t([0, 0.6, 1], [0.1, 0.47, 1]),
+        translateY: t([0, 0.6, 1], [-1000, 60, 0]),
+      });
+      return { opacity: t([0, 0.6, 1], [0, 1, 1]), transform: transforms };
+    case 'zoomInLeft':
+      transforms.push({
+        scale: t([0, 0.6, 1], [0.1, 0.47, 1]),
+        translateX: t([0, 0.6, 1], [-1000, 10, 0]),
+      });
+      return { opacity: t([0, 0.6, 1], [0, 1, 1]), transform: transforms };
+    case 'zoomInRight':
+      transforms.push({
+        scale: t([0, 0.6, 1], [0.1, 0.47, 1]),
+        translateX: t([0, 0.6, 1], [1000, -10, 0]),
+      });
+      return { opacity: t([0, 0.6, 1], [0, 1, 1]), transform: transforms };
+    case 'zoomInTopLeft':
+      transforms.push({
+        scale: t([0, 1], [0.1, 1]),
+        translateX: t([0, 1], [-1000, 0]),
+        translateY: t([0, 1], [-1000, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'zoomInTopRight':
+      transforms.push({
+        scale: t([0, 1], [0.1, 1]),
+        translateX: t([0, 1], [1000, 0]),
+        translateY: t([0, 1], [-1000, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'zoomInBottomLeft':
+      transforms.push({
+        scale: t([0, 1], [0.1, 1]),
+        translateX: t([0, 1], [-1000, 0]),
+        translateY: t([0, 1], [1000, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'zoomInBottomRight':
+      transforms.push({
+        scale: t([0, 1], [0.1, 1]),
+        translateX: t([0, 1], [1000, 0]),
+        translateY: t([0, 1], [1000, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'zoomOut':
+      transforms.push({ scale: t([0, 1], [1, 0]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'zoomOutUp':
+      transforms.push({
+        scale: t([0, 0.4, 1], [1, 0.47, 0.1]),
+        translateY: t([0, 1], [0, -1000]),
+      });
+      return { opacity: t([0, 0.4, 1], [1, 1, 0]), transform: transforms };
+    case 'zoomOutDown':
+      transforms.push({
+        scale: t([0, 0.4, 1], [1, 0.47, 0.1]),
+        translateY: t([0, 1], [0, 1000]),
+      });
+      return { opacity: t([0, 0.4, 1], [1, 1, 0]), transform: transforms };
+    case 'zoomOutLeft':
+      transforms.push({
+        scale: t([0, 1], [1, 0]),
+        translateX: t([0, 1], [0, -1000]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'zoomOutRight':
+      transforms.push({
+        scale: t([0, 1], [1, 0]),
+        translateX: t([0, 1], [0, 1000]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // BACKS
+    case 'backInUp':
+      transforms.push({
+        translateY: t([0, 0.8, 1], [800, -15, 0]),
+        scale: t([0, 0.8, 1], [0.7, 0.7, 1]),
+      });
+      return { opacity: t([0, 0.8], [0.7, 1]), transform: transforms };
+    case 'backInDown':
+      transforms.push({
+        translateY: t([0, 0.8, 1], [-800, 15, 0]),
+        scale: t([0, 0.8, 1], [0.7, 0.7, 1]),
+      });
+      return { opacity: t([0, 0.8], [0.7, 1]), transform: transforms };
+    case 'backInLeft':
+      transforms.push({
+        translateX: t([0, 0.8, 1], [-800, 15, 0]),
+        scale: t([0, 0.8, 1], [0.7, 0.7, 1]),
+      });
+      return { opacity: t([0, 0.8], [0.7, 1]), transform: transforms };
+    case 'backInRight':
+      transforms.push({
+        translateX: t([0, 0.8, 1], [800, -15, 0]),
+        scale: t([0, 0.8, 1], [0.7, 0.7, 1]),
+      });
+      return { opacity: t([0, 0.8], [0.7, 1]), transform: transforms };
+    case 'backOutUp':
+      transforms.push({
+        translateY: t([0, 0.2, 1], [0, 15, -800]),
+        scale: t([0, 0.2, 1], [1, 0.7, 0.7]),
+      });
+      return { opacity: t([0, 0.2, 1], [1, 1, 0.7]), transform: transforms };
+    case 'backOutDown':
+      transforms.push({
+        translateY: t([0, 0.2, 1], [0, -15, 800]),
+        scale: t([0, 0.2, 1], [1, 0.7, 0.7]),
+      });
+      return { opacity: t([0, 0.2, 1], [1, 1, 0.7]), transform: transforms };
+    case 'backOutLeft':
+      transforms.push({
+        translateX: t([0, 0.2, 1], [0, 15, -800]),
+        scale: t([0, 0.2, 1], [1, 0.7, 0.7]),
+      });
+      return { opacity: t([0, 0.2, 1], [1, 1, 0.7]), transform: transforms };
+    case 'backOutRight':
+      transforms.push({
+        translateX: t([0, 0.2, 1], [0, -15, 800]),
+        scale: t([0, 0.2, 1], [1, 0.7, 0.7]),
+      });
+      return { opacity: t([0, 0.2, 1], [1, 1, 0.7]), transform: transforms };
+
+    // BOUNCES
+    case 'bounce':
+      transforms.push({
+        translateY: t(
+          [0, 0.2, 0.4, 0.43, 0.53, 0.7, 0.8, 0.9, 1],
+          [0, 0, -30, -30, 0, -15, 0, -4, 0]
+        ),
+      });
+      return { transform: transforms };
+    case 'bounceIn':
+      transforms.push({
+        scale: t([0, 0.2, 0.4, 0.6, 0.8, 1], [0.3, 1.1, 0.9, 1.03, 0.97, 1]),
+      });
+      return { opacity: t([0, 0.2], [0, 1]), transform: transforms };
+    case 'bounceInUp':
+      transforms.push({
+        translateY: t([0, 0.6, 0.75, 0.9, 1], [1000, -20, 10, -5, 0]),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'bounceInDown':
+      transforms.push({
+        translateY: t([0, 0.6, 0.75, 0.9, 1], [-1000, 20, -10, 5, 0]),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'bounceInLeft':
+      transforms.push({
+        translateX: t([0, 0.6, 0.75, 0.9, 1], [-1000, 20, -10, 5, 0]),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'bounceInRight':
+      transforms.push({
+        translateX: t([0, 0.6, 0.75, 0.9, 1], [1000, -20, 10, -5, 0]),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'bounceOut':
+      transforms.push({
+        scale: t([0, 0.2, 0.5, 0.55, 1], [1, 0.9, 1.1, 1.1, 0.3]),
+      });
+      return { opacity: t([0, 0.55, 1], [1, 1, 0]), transform: transforms };
+    case 'bounceOutUp':
+      transforms.push({
+        translateY: t([0, 0.2, 0.4, 0.45, 1], [0, -10, 20, 20, -1000]),
+      });
+      return { opacity: t([0, 0.45, 1], [1, 1, 0]), transform: transforms };
+    case 'bounceOutDown':
+      transforms.push({
+        translateY: t([0, 0.2, 0.4, 0.45, 1], [0, 10, -20, -20, 1000]),
+      });
+      return { opacity: t([0, 0.45, 1], [1, 1, 0]), transform: transforms };
+    case 'bounceOutLeft':
+      transforms.push({ translateX: t([0, 0.2, 1], [0, 20, -1000]) });
+      return { opacity: t([0, 0.2, 1], [1, 1, 0]), transform: transforms };
+    case 'bounceOutRight':
+      transforms.push({ translateX: t([0, 0.2, 1], [0, -20, 1000]) });
+      return { opacity: t([0, 0.2, 1], [1, 1, 0]), transform: transforms };
+
+    // ATTENTION SEEKERS
+    case 'pulse':
+      transforms.push({ scale: t([0, 0.5, 1], [1, 1.05, 1]) });
+      return { transform: transforms };
+    case 'pulseAlt':
+      transforms.push({ scale: t([0, 0.5, 1], [1, 1.2, 1]) });
+      return { opacity: t([0, 0.5, 1], [1, 0.8, 1]), transform: transforms };
+    case 'shake':
+      transforms.push({
+        translateX: t(
+          [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+          [0, -10, 10, -10, 10, -10, 10, -10, 10, -10, 0]
+        ),
+      });
+      return { transform: transforms };
+    case 'shakeX':
+      transforms.push({
+        translateX: t(
+          [0, 0.1, 0.3, 0.5, 0.7, 0.9, 1],
+          [0, -10, 10, -10, 10, -10, 0]
+        ),
+      });
+      return { transform: transforms };
+    case 'shakeY':
+      transforms.push({
+        translateY: t(
+          [0, 0.1, 0.3, 0.5, 0.7, 0.9, 1],
+          [0, -10, 10, -10, 10, -10, 0]
+        ),
+      });
+      return { transform: transforms };
+    case 'headShake':
+      transforms.push({
+        translateX: t(
+          [0, 0.065, 0.185, 0.315, 0.435, 0.5, 1],
+          [0, -6, 5, -3, 2, 0, 0]
+        ),
+        rotateY: t(
+          [0, 0.065, 0.185, 0.315, 0.435, 0.5, 1],
+          ['0deg', '-9deg', '7deg', '-5deg', '3deg', '0deg', '0deg']
+        ),
+      });
+      return { transform: transforms };
+    case 'swing':
+      transforms.push({
+        rotate: t(
+          [0, 0.2, 0.4, 0.6, 0.8, 1],
+          ['0deg', '15deg', '-10deg', '5deg', '-5deg', '0deg']
+        ),
+      });
+      return { transform: transforms };
+    case 'tada':
+      transforms.push({
+        scale: t([0, 0.1, 0.2, 0.3, 1], [1, 0.9, 0.9, 1.1, 1]),
+        rotate: t(
+          [0, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+          [
+            '0deg',
+            '3deg',
+            '-3deg',
+            '3deg',
+            '-3deg',
+            '3deg',
+            '-3deg',
+            '3deg',
+            '0deg',
+          ]
+        ),
+      });
+      return { transform: transforms };
+    case 'wobble':
+      transforms.push({
+        translateX: t(
+          [0, 0.15, 0.3, 0.45, 0.6, 0.75, 1],
+          [0, -25, 20, -15, 10, -5, 0]
+        ),
+        rotate: t(
+          [0, 0.15, 0.3, 0.45, 0.6, 0.75, 1],
+          ['0deg', '-5deg', '3deg', '-3deg', '2deg', '-1deg', '0deg']
+        ),
+      });
+      return { transform: transforms };
+    case 'jello':
+      transforms.push({
+        skewX: t(
+          [0, 0.111, 0.222, 0.333, 0.444, 0.555, 0.666, 0.777, 0.888, 1],
+          [
+            '0deg',
+            '-12.5deg',
+            '6.25deg',
+            '-3.125deg',
+            '1.5625deg',
+            '-0.78125deg',
+            '0.390625deg',
+            '-0.1953125deg',
+            '0deg',
+            '0deg',
+          ]
+        ),
+        skewY: t(
+          [0, 0.111, 0.222, 0.333, 0.444, 0.555, 0.666, 0.777, 0.888, 1],
+          [
+            '0deg',
+            '-12.5deg',
+            '6.25deg',
+            '-3.125deg',
+            '1.5625deg',
+            '-0.78125deg',
+            '0.390625deg',
+            '-0.1953125deg',
+            '0deg',
+            '0deg',
+          ]
+        ),
+      });
+      return { transform: transforms };
+    case 'heartBeat':
+      transforms.push({
+        scale: t([0, 0.14, 0.28, 0.42, 0.7, 1], [1, 1.3, 1, 1.3, 1, 1]),
+      });
+      return { transform: transforms };
+    case 'flash':
+      return { opacity: t([0, 0.25, 0.5, 0.75, 1], [1, 0, 1, 0, 1]) };
+    case 'rubberBand':
+      transforms.push({
+        scaleX: t(
+          [0, 0.3, 0.4, 0.5, 0.65, 0.75, 1],
+          [1, 1.25, 0.75, 1.15, 0.95, 1.05, 1]
+        ),
+        scaleY: t(
+          [0, 0.3, 0.4, 0.5, 0.65, 0.75, 1],
+          [1, 0.75, 1.25, 0.85, 1.05, 0.95, 1]
+        ),
+      });
+      return { transform: transforms };
+
+    // FLIPPERS
+    case 'flip':
+      transforms.push({
+        perspective: 400,
+        rotateY: t(
+          [0, 0.4, 0.5, 0.8, 1],
+          ['-360deg', '-190deg', '-170deg', '-3deg', '0deg']
+        ),
+        scale: t([0, 0.4, 0.5, 0.8, 1], [1, 1.4, 1.4, 1, 1]),
+      });
+      return { transform: transforms };
+    case 'flipInX':
+      transforms.push({
+        perspective: 400,
+        rotateX: t(
+          [0, 0.4, 0.6, 0.8, 1],
+          ['90deg', '-20deg', '10deg', '-5deg', '0deg']
+        ),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'flipInY':
+      transforms.push({
+        perspective: 400,
+        rotateY: t(
+          [0, 0.4, 0.6, 0.8, 1],
+          ['90deg', '-20deg', '10deg', '-5deg', '0deg']
+        ),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'flipOutX':
+      transforms.push({
+        perspective: 400,
+        rotateX: t([0, 0.3, 1], [0, -20, 90]),
+      });
+      return { opacity: t([0, 0.3, 1], [1, 1, 0]), transform: transforms };
+    case 'flipOutY':
+      transforms.push({
+        perspective: 400,
+        rotateY: t([0, 0.3, 1], [0, -20, 90]),
+      });
+      return { opacity: t([0, 0.3, 1], [1, 1, 0]), transform: transforms };
+
+    // ROTATES
+    case 'rotateIn':
+      transforms.push({ rotate: t([0, 1], ['-200deg', '0deg']) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'rotateInDownLeft':
+      transforms.push({ rotate: t([0, 1], ['-45deg', '0deg']) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'rotateInDownRight':
+      transforms.push({ rotate: t([0, 1], ['45deg', '0deg']) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'rotateInUpLeft':
+      transforms.push({ rotate: t([0, 1], ['45deg', '0deg']) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'rotateInUpRight':
+      transforms.push({ rotate: t([0, 1], ['-45deg', '0deg']) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'rotateOut':
+      transforms.push({ rotate: t([0, 1], ['0deg', '200deg']) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'rotateOutDownLeft':
+      transforms.push({ rotate: t([0, 1], ['0deg', '45deg']) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'rotateOutDownRight':
+      transforms.push({ rotate: t([0, 1], ['0deg', '-45deg']) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // LIGHTSPEED
+    case 'lightSpeedInRight':
+      transforms.push({
+        translateX: t([0, 0.6, 0.8, 1], [500, 0, 0, 0]),
+        skewX: t([0, 0.6, 0.8, 1], ['-30deg', '20deg', '-5deg', '0deg']),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'lightSpeedInLeft':
+      transforms.push({
+        translateX: t([0, 0.6, 0.8, 1], [-500, 0, 0, 0]),
+        skewX: t([0, 0.6, 0.8, 1], ['30deg', '-20deg', '5deg', '0deg']),
+      });
+      return { opacity: t([0, 0.6], [0, 1]), transform: transforms };
+    case 'lightSpeedOutRight':
+      transforms.push({
+        translateX: t([0, 1], [0, 500]),
+        skewX: t([0, 1], ['0deg', '30deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'lightSpeedOutLeft':
+      transforms.push({
+        translateX: t([0, 1], [0, -500]),
+        skewX: t([0, 1], ['0deg', '-30deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // SPECIALS
+    case 'rollIn':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        rotate: t([0, 1], ['-120deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'rollOut':
+      transforms.push({
+        translateX: t([0, 1], [0, 500]),
+        rotate: t([0, 1], ['0deg', '120deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'jackInTheBox':
+      transforms.push({
+        scale: t([0, 0.5, 0.7, 1], [0.1, 0.5, 0.5, 1]),
+        rotate: t([0, 0.5, 0.7, 1], ['30deg', '-10deg', '3deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'hinge':
+      transforms.push({
+        rotate: t(
+          [0, 0.2, 0.4, 0.6, 0.8, 1],
+          ['0deg', '80deg', '60deg', '80deg', '60deg', '0deg']
+        ),
+        translateY: t([0, 0.8, 1], [0, 0, 700]),
+      });
+      return { opacity: t([0, 0.8, 1], [1, 1, 0]), transform: transforms };
+    case 'spiralIn':
+      transforms.push({
+        scale: t([0, 1], [0, 1]),
+        rotate: t([0, 1], ['-720deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'spiralOut':
+      transforms.push({
+        scale: t([0, 1], [1, 0]),
+        rotate: t([0, 1], ['0deg', '720deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'focusIn':
+      transforms.push({ scale: t([0, 1], [1.2, 1]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'focusOut':
+      transforms.push({ scale: t([0, 1], [1, 1.2]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'focusInLeft':
+      transforms.push({
+        translateX: t([0, 1], [-20, 0]),
+        scale: t([0, 1], [1.1, 1]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'focusInRight':
+      transforms.push({
+        translateX: t([0, 1], [20, 0]),
+        scale: t([0, 1], [1.1, 1]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'focusInUp':
+      transforms.push({
+        translateY: t([0, 1], [20, 0]),
+        scale: t([0, 1], [1.1, 1]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'focusInDown':
+      transforms.push({
+        translateY: t([0, 1], [-20, 0]),
+        scale: t([0, 1], [1.1, 1]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+
+    // CORNERS
+    case 'cornerInTopLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        translateY: t([0, 1], [-500, 0]),
+        rotate: t([0, 1], ['-45deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'cornerInTopRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        translateY: t([0, 1], [-500, 0]),
+        rotate: t([0, 1], ['45deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'cornerInBottomLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        translateY: t([0, 1], [500, 0]),
+        rotate: t([0, 1], ['45deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'cornerInBottomRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        translateY: t([0, 1], [500, 0]),
+        rotate: t([0, 1], ['-45deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'cornerOutTopLeft':
+      transforms.push({
+        translateX: t([0, 1], [0, -500]),
+        translateY: t([0, 1], [0, -500]),
+        rotate: t([0, 1], ['0deg', '-45deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'cornerOutTopRight':
+      transforms.push({
+        translateX: t([0, 1], [0, 500]),
+        translateY: t([0, 1], [0, -500]),
+        rotate: t([0, 1], ['0deg', '45deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'cornerOutBottomLeft':
+      transforms.push({
+        translateX: t([0, 1], [0, -500]),
+        translateY: t([0, 1], [0, 500]),
+        rotate: t([0, 1], ['0deg', '45deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'cornerOutBottomRight':
+      transforms.push({
+        translateX: t([0, 1], [0, 500]),
+        translateY: t([0, 1], [0, 500]),
+        rotate: t([0, 1], ['0deg', '-45deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // 3D DOOR & PERSPECTIVE
+    case 'perspectiveFlipX':
+      transforms.push({
+        perspective: 1000,
+        rotateX: t([0, 1], ['-90deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'perspectiveFlipY':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['-90deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'doorOpenLeft':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['0deg', '90deg']),
+        translateX: t([0, 1], [0, -100]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'doorOpenRight':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['0deg', '-90deg']),
+        translateX: t([0, 1], [0, 100]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'doorCloseLeft':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['90deg', '0deg']),
+        translateX: t([0, 1], [-100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'doorCloseRight':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['-90deg', '0deg']),
+        translateX: t([0, 1], [100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+
+    // OTHERS
+    case 'stretchX':
+      transforms.push({ scaleX: t([0, 0.5, 1], [1, 1.5, 1]) });
+      return { transform: transforms };
+    case 'stretchY':
+      transforms.push({ scaleY: t([0, 0.5, 1], [1, 1.5, 1]) });
+      return { transform: transforms };
+    case 'skewIn':
+      transforms.push({ skewX: t([0, 1], ['45deg', '0deg']) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'skewOut':
+      transforms.push({ skewX: t([0, 1], ['0deg', '45deg']) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'skewInUp':
+      transforms.push({
+        skewY: t([0, 1], ['-45deg', '0deg']),
+        translateY: t([0, 1], [100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'skewInDown':
+      transforms.push({
+        skewY: t([0, 1], ['45deg', '0deg']),
+        translateY: t([0, 1], [-100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'perspectiveRotate':
+      transforms.push({
+        perspective: 400,
+        rotateX: t([0, 1], ['0deg', '180deg']),
+      });
+      return { transform: transforms };
+    case 'wave':
+      transforms.push({
+        translateY: t([0, 0.25, 0.5, 0.75, 1], [0, -20, 0, 20, 0]),
+      });
+      return { transform: transforms };
+    case 'blink':
+      return { opacity: t([0, 0.5, 1], [1, 0, 1]) };
+    case 'expandUp':
+      transforms.push({
+        scaleY: t([0, 1], [0, 1]),
+        translateY: t([0, 1], [50, 0]),
+      });
+      return { transform: transforms };
+    case 'expandDown':
+      transforms.push({
+        scaleY: t([0, 1], [0, 1]),
+        translateY: t([0, 1], [-50, 0]),
+      });
+      return { transform: transforms };
+    case 'expandLeft':
+      transforms.push({
+        scaleX: t([0, 1], [0, 1]),
+        translateX: t([0, 1], [50, 0]),
+      });
+      return { transform: transforms };
+    case 'expandRight':
+      transforms.push({
+        scaleX: t([0, 1], [0, 1]),
+        translateX: t([0, 1], [-50, 0]),
+      });
+      return { transform: transforms };
+    case 'squeezeX':
+      transforms.push({ scaleX: t([0, 0.5, 1], [1, 0.5, 1]) });
+      return { transform: transforms };
+    case 'squeezeY':
+      transforms.push({ scaleY: t([0, 0.5, 1], [1, 0.5, 1]) });
+      return { transform: transforms };
+    case 'wiggle':
+      transforms.push({
+        rotate: t(
+          [0, 0.25, 0.5, 0.75, 1],
+          ['0deg', '5deg', '0deg', '-5deg', '0deg']
+        ),
+      });
+      return { transform: transforms };
+    case 'shiver':
+      transforms.push({
+        scale: t(
+          [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+          [1, 1.05, 0.95, 1.05, 0.95, 1, 1.05, 0.95, 1.05, 0.95, 1]
+        ),
+      });
+      return { transform: transforms };
+    case 'shutterIn':
+      transforms.push({ scaleY: t([0, 1], [0, 1]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'shutterOut':
+      transforms.push({ scaleY: t([0, 1], [1, 0]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'contractIn':
+      transforms.push({ scale: t([0, 1], [1.5, 1]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'contractOut':
+      transforms.push({ scale: t([0, 1], [1, 1.5]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'puffIn':
+      transforms.push({ scale: t([0, 1], [2, 1]), perspective: 1000 });
+      return { opacity: animatedValue, transform: transforms };
+    case 'puffOut':
+      transforms.push({ scale: t([0, 1], [1, 2]), perspective: 1000 });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'flingInLeft':
+      transforms.push({ translateX: t([0, 1], [-500, 0]) });
+      return { transform: transforms };
+    case 'flingInRight':
+      transforms.push({ translateX: t([0, 1], [500, 0]) });
+      return { transform: transforms };
+    case 'flingInUp':
+      transforms.push({ translateY: t([0, 1], [500, 0]) });
+      return { transform: transforms };
+    case 'flingInDown':
+      transforms.push({ translateY: t([0, 1], [-500, 0]) });
+      return { transform: transforms };
+    case 'float':
+      transforms.push({ translateY: t([0, 0.5, 1], [0, -10, 0]) });
+      return { transform: transforms };
+    case 'beat':
+      transforms.push({ scale: t([0, 0.5, 1], [1, 1.1, 1]) });
+      return { transform: transforms };
+    case 'bounceInTopLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        translateY: t([0, 1], [-500, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'bounceInTopRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        translateY: t([0, 1], [-500, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'bounceInBottomLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        translateY: t([0, 1], [500, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'bounceInBottomRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        translateY: t([0, 1], [500, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'zoomInRotateLeft':
+      transforms.push({
+        scale: t([0, 1], [0, 1]),
+        rotate: t([0, 1], ['-45deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'zoomInRotateRight':
+      transforms.push({
+        scale: t([0, 1], [0, 1]),
+        rotate: t([0, 1], ['45deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'swingRotate':
+      transforms.push({
+        rotate: t(
+          [0, 0.2, 0.4, 0.6, 0.8, 1],
+          ['0deg', '45deg', '-45deg', '30deg', '-30deg', '0deg']
+        ),
+      });
+      return { transform: transforms };
+    case 'perspectiveSlideInLeft':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['-45deg', '0deg']),
+        translateX: t([0, 1], [-200, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'perspectiveSlideInRight':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['45deg', '0deg']),
+        translateX: t([0, 1], [200, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'tiltLeft':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 0.5, 1], ['0deg', '-15deg', '0deg']),
+      });
+      return { transform: transforms };
+    case 'tiltRight':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 0.5, 1], ['0deg', '15deg', '0deg']),
+      });
+      return { transform: transforms };
+    case 'squash':
+      transforms.push({
+        scaleX: t([0, 0.5, 1], [1, 1.3, 1]),
+        scaleY: t([0, 0.5, 1], [1, 0.7, 1]),
+      });
+      return { transform: transforms };
+    case 'vibrate':
+      transforms.push({
+        translateX: t([0, 0.2, 0.4, 0.6, 0.8, 1], [0, -2, 2, -2, 2, 0]),
+        translateY: t([0, 0.2, 0.4, 0.6, 0.8, 1], [0, 2, -2, 2, -2, 0]),
+      });
+      return { transform: transforms };
+    case 'sway':
+      transforms.push({
+        rotate: t([0, 0.5, 1], ['-5deg', '5deg', '-5deg']),
+        translateX: t([0, 0.5, 1], [-10, 10, -10]),
+      });
+      return { transform: transforms };
+    case 'floatLeft':
+      transforms.push({
+        translateX: t([0, 0.5, 1], [0, -20, 0]),
+        translateY: t([0, 0.5, 1], [0, -10, 0]),
+      });
+      return { transform: transforms };
+    case 'floatRight':
+      transforms.push({
+        translateX: t([0, 0.5, 1], [0, 20, 0]),
+        translateY: t([0, 0.5, 1], [0, -10, 0]),
+      });
+      return { transform: transforms };
+
+    // NEW VARIETY
+    case 'newspaper':
+      transforms.push({
+        scale: t([0, 1], [0, 1]),
+        rotate: t([0, 1], ['0deg', '720deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'popIn':
+      transforms.push({ scale: t([0, 0.7, 1], [0, 1.1, 1]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'popOut':
+      transforms.push({ scale: t([0, 1], [1, 0]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'popInUp':
+      transforms.push({
+        scale: t([0, 0.7, 1], [0, 1.1, 1]),
+        translateY: t([0, 1], [100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'popInDown':
+      transforms.push({
+        scale: t([0, 0.7, 1], [0, 1.1, 1]),
+        translateY: t([0, 1], [-100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'popInLeft':
+      transforms.push({
+        scale: t([0, 0.7, 1], [0, 1.1, 1]),
+        translateX: t([0, 1], [-100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'popInRight':
+      transforms.push({
+        scale: t([0, 0.7, 1], [0, 1.1, 1]),
+        translateX: t([0, 1], [100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+
+    // SKATE
+    case 'skateInLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        rotate: t([0, 1], ['-15deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'skateInRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        rotate: t([0, 1], ['15deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'skateOutLeft':
+      transforms.push({
+        translateX: t([0, 1], [0, -500]),
+        rotate: t([0, 1], ['0deg', '-15deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'skateOutRight':
+      transforms.push({
+        translateX: t([0, 1], [0, 500]),
+        rotate: t([0, 1], ['0deg', '15deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // DRIPS & DROPS
+    case 'drip':
+      transforms.push({
+        translateY: t([0, 0.5, 1], [0, 20, 40]),
+        scaleY: t([0, 0.5, 1], [1, 1.5, 1]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'dropIn':
+      transforms.push({
+        translateY: t([0, 0.8, 1], [-500, 0, 0]),
+        scaleY: t([0, 0.8, 1], [1.5, 0.8, 1]),
+      });
+      return { transform: transforms };
+    case 'dropOut':
+      transforms.push({
+        translateY: t([0, 1], [0, 500]),
+        scaleY: t([0, 1], [1, 1.5]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'hangIn':
+      transforms.push({
+        rotate: t([0, 0.5, 1], ['100deg', '-20deg', '0deg']),
+        translateY: t([0, 1], [-200, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'hangOut':
+      transforms.push({
+        rotate: t([0, 1], ['0deg', '100deg']),
+        translateY: t([0, 1], [0, 200]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // REVEALS
+    case 'revealUp':
+      transforms.push({ translateY: t([0, 1], [100, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'revealDown':
+      transforms.push({ translateY: t([0, 1], [-100, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'revealLeft':
+      transforms.push({ translateX: t([0, 1], [100, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'revealRight':
+      transforms.push({ translateX: t([0, 1], [-100, 0]) });
+      return { opacity: animatedValue, transform: transforms };
+
+    // INFINITE VARIANTS
+    case 'bounceInfinite':
+      transforms.push({ translateY: t([0, 0.5, 1], [0, -20, 0]) });
+      return { transform: transforms };
+    case 'rotateInfinite':
+      transforms.push({ rotate: t([0, 1], ['0deg', '360deg']) });
+      return { transform: transforms };
+    case 'slideInfinite':
+      transforms.push({ translateX: t([0, 0.5, 1], [-20, 20, -20]) });
+      return { transform: transforms };
+    case 'flipInfiniteX':
+      transforms.push({
+        perspective: 400,
+        rotateX: t([0, 1], ['0deg', '360deg']),
+      });
+      return { transform: transforms };
+    case 'flipInfiniteY':
+      transforms.push({
+        perspective: 400,
+        rotateY: t([0, 1], ['0deg', '360deg']),
+      });
+      return { transform: transforms };
+
+    // CONTINUOUS
+    case 'shimmer':
+      return { opacity: t([0, 0.5, 1], [1, 0.3, 1]) };
+    case 'dance':
+      transforms.push({
+        rotate: t(
+          [0, 0.25, 0.5, 0.75, 1],
+          ['0deg', '15deg', '0deg', '-15deg', '0deg']
+        ),
+        translateY: t([0, 0.5, 1], [0, -10, 0]),
+      });
+      return { transform: transforms };
+    case 'ghost':
+      transforms.push({
+        translateY: t([0, 0.5, 1], [0, -15, 0]),
+        scale: t([0, 0.5, 1], [1, 1.1, 1]),
+      });
+      return {
+        opacity: t([0, 0.5, 1], [0.8, 0.4, 0.8]),
+        transform: transforms,
+      };
+    case 'smoke':
+      transforms.push({
+        translateY: t([0, 1], [0, -50]),
+        scale: t([0, 1], [1, 1.5]),
+        rotate: t([0, 1], ['0deg', '20deg']),
+      });
+      return { opacity: t([0, 1], [0.8, 0]), transform: transforms };
+
+    // TILTS
+    case 'tiltInTop':
+      transforms.push({
+        perspective: 1000,
+        rotateX: t([0, 1], ['-30deg', '0deg']),
+        translateY: t([0, 1], [-100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'tiltInBottom':
+      transforms.push({
+        perspective: 1000,
+        rotateX: t([0, 1], ['30deg', '0deg']),
+        translateY: t([0, 1], [100, 0]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'scaleIn':
+      transforms.push({ scale: t([0, 1], [0.5, 1]) });
+      return { opacity: animatedValue, transform: transforms };
+    case 'scaleOut':
+      transforms.push({ scale: t([0, 1], [1, 0.5]) });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    // SPACE
+    case 'orbit':
+      transforms.push({
+        translateX: t([0, 0.25, 0.5, 0.75, 1], [0, 50, 0, -50, 0]),
+        translateY: t([0, 0.25, 0.5, 0.75, 1], [-20, 0, 20, 0, -20]),
+        scale: t([0, 0.5, 1], [1, 0.7, 1]),
+      });
+      return { transform: transforms };
+    case 'ufo':
+      transforms.push({
+        translateX: t([0, 0.1, 0.2, 0.5, 0.8, 1], [0, 50, -50, 100, -100, 0]),
+        translateY: t([0, 0.5, 1], [0, -10, 0]),
+      });
+      return { transform: transforms };
+
+    // EXTRA
+    case 'foldIn':
+      transforms.push({
+        perspective: 1000,
+        rotateX: t([0, 1], ['-90deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'foldOut':
+      transforms.push({
+        perspective: 1000,
+        rotateX: t([0, 1], ['0deg', '90deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'unfoldIn':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['-90deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'unfoldOut':
+      transforms.push({
+        perspective: 1000,
+        rotateY: t([0, 1], ['0deg', '90deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    case 'rollInLeft':
+      transforms.push({
+        translateX: t([0, 1], [-500, 0]),
+        rotate: t([0, 1], ['-360deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'rollInRight':
+      transforms.push({
+        translateX: t([0, 1], [500, 0]),
+        rotate: t([0, 1], ['360deg', '0deg']),
+      });
+      return { opacity: animatedValue, transform: transforms };
+
+    case 'jitter':
+      transforms.push({
+        translateX: t(
+          [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+          [0, 5, -5, 3, -3, 5, -2, 4, -4, 2, 0]
+        ),
+        translateY: t(
+          [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+          [0, -3, 3, -2, 2, -4, 1, -3, 3, -1, 0]
+        ),
+      });
+      return { transform: transforms };
+    case 'glitch':
+      transforms.push({
+        translateX: t([0, 0.1, 0.2, 0.5, 0.8, 1], [0, 10, -10, 5, -5, 0]),
+        skewX: t(
+          [0, 0.2, 0.4, 0.6, 1],
+          ['0deg', '10deg', '-10deg', '5deg', '0deg']
+        ),
+      });
+      return {
+        opacity: t([0, 0.1, 0.2, 0.3, 1], [1, 0.5, 1, 0.7, 1]),
+        transform: transforms,
+      };
+
+    case 'popOutUp':
+      transforms.push({
+        scale: t([0, 0.3, 1], [1, 1.1, 0]),
+        translateY: t([0, 1], [0, -100]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'popOutDown':
+      transforms.push({
+        scale: t([0, 0.3, 1], [1, 1.1, 0]),
+        translateY: t([0, 1], [0, 100]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'vibrateFast':
+    case 'vibrateSlow':
+      transforms.push({
+        translateX: t([0, 0.2, 0.4, 0.6, 0.8, 1], [0, -2, 2, -2, 2, 0]),
+      });
+      return { transform: transforms };
+    case 'tiltOutTop':
+      transforms.push({
+        perspective: 1000,
+        rotateX: t([0, 1], ['0deg', '-30deg']),
+        translateY: t([0, 1], [0, -100]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'spinIn':
+      transforms.push({
+        rotate: t([0, 1], ['-360deg', '0deg']),
+        scale: t([0, 1], [0, 1]),
+      });
+      return { opacity: animatedValue, transform: transforms };
+    case 'spinOut':
+      transforms.push({
+        rotate: t([0, 1], ['0deg', '360deg']),
+        scale: t([0, 1], [1, 0]),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'bounceTop':
+      transforms.push({ translateY: t([0, 0.5, 1], [0, -30, 0]) });
+      return { transform: transforms };
+    case 'bounceBottom':
+      transforms.push({ translateY: t([0, 0.5, 1], [0, 30, 0]) });
+      return { transform: transforms };
+    case 'bounceLeft':
+      transforms.push({ translateX: t([0, 0.5, 1], [0, -30, 0]) });
+      return { transform: transforms };
+    case 'bounceRight':
+      transforms.push({ translateX: t([0, 0.5, 1], [0, 30, 0]) });
+      return { transform: transforms };
+    case 'fallIn':
+      transforms.push({
+        translateY: t([0, 1], [-500, 0]),
+        rotate: t([0, 1], ['15deg', '0deg']),
+      });
+      return { transform: transforms };
+    case 'fallOut':
+      transforms.push({
+        translateY: t([0, 1], [0, 500]),
+        rotate: t([0, 1], ['0deg', '15deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+    case 'raiseIn':
+      transforms.push({
+        translateY: t([0, 1], [500, 0]),
+        rotate: t([0, 1], ['-15deg', '0deg']),
+      });
+      return { transform: transforms };
+    case 'raiseOut':
+      transforms.push({
+        translateY: t([0, 1], [0, -500]),
+        rotate: t([0, 1], ['0deg', '-15deg']),
+      });
+      return { opacity: t([0, 1], [1, 0]), transform: transforms };
+
+    default:
+      return { opacity: 1 };
+  }
+};