feat(animations) : jump animations

src/HOC/wrapper.tsx

@@ -13,7 +13,7 @@ import RevealBase from '../lib/Base.js'
  * @param {React.ReactNode} children
  * @returns {React.ReactNode}
  */
-export default function wrapper(props: { when: any; in: any }, inEffect: any, outEffect: any, children: string | number | boolean |
+export default function wrapper(props: { when: any; in: any, }, inEffect: any, outEffect: any, children: string | number | boolean |
     React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined) {
   if ('in' in props)
     props.when = props.in

src/animations/simple/Jump.ts

@@ -0,0 +1,38 @@
+import wrapper from '@/HOC/wrapper';
+import { animation, defaults } from '@/lib/defaultConfigs';
+
+
+const rule = `
+ from, 20%, 53%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, -4px, 0);
+}
+`;
+
+let name: string | undefined;
+function make() {
+    return name || (name = animation(rule));
+}
+
+
+function Jump({ children, out, timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, forever, ...props } = defaults) {
+    const effect = { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', } };
+    // @ts-expect-error(some props are not allowed, this will be fixed later)
+    return wrapper(props, effect, false, children);
+}
+
+export default Jump;

src/lib/defaultConfigs.ts

@@ -23,7 +23,12 @@ export const namespace = 'react-swiftreveal'
 
 // default values
 
-export const defaults = { duration: 1000, delay: 0, count: 1 }
+export const defaults: {
+  duration: number;
+  delay: number;
+  count: number;
+  [key: string]: any;
+} = { duration: 1000, delay: 0, count: 1 }
 export let ssr = true
 export let observerMode = false
 export let raf: WindowRequestAnimationFrame = cb => setTimeout(cb, 66)