npm - react-ui-animate - Versions diffs - 3.0.0-rc.0 → 3.0.0-rc.1 - Mend

react-ui-animate 3.0.0-rc.0 → 3.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

package/dist/gestures/helpers/math.d.ts +1 -1
package/dist/index.js +1 -2897
package/dist/index.js.map +1 -1
package/package.json +2 -1
package/.vscode/settings.json +0 -3
package/dist/animation/animationType.d.ts +0 -15
package/dist/animation/core/animation/Animation.d.ts +0 -16
package/dist/animation/core/animation/FluidValue.d.ts +0 -21
package/dist/animation/core/animation/RequestAnimationFrame.d.ts +0 -8
package/dist/animation/core/animation/SpringAnimation.d.ts +0 -41
package/dist/animation/core/animation/TimingAnimation.d.ts +0 -35
package/dist/animation/core/animation/TransitionValue.d.ts +0 -21
package/dist/animation/core/helpers/camelToDash.d.ts +0 -7
package/dist/animation/core/helpers/canInterpolate.d.ts +0 -11
package/dist/animation/core/helpers/getAnimatableObject.d.ts +0 -22
package/dist/animation/core/helpers/getNonAnimatableStyle.d.ts +0 -6
package/dist/animation/core/react/Tags.d.ts +0 -3
package/dist/animation/core/react/TransformStyles.d.ts +0 -8
package/dist/animation/core/react/animated.d.ts +0 -29
package/dist/animation/core/react/combineRefs.d.ts +0 -2
package/dist/animation/core/react/functions/camelToDash.d.ts +0 -7
package/dist/animation/core/react/functions/getAnimatableObject.d.ts +0 -22
package/dist/animation/core/react/functions/getCleanProps.d.ts +0 -4
package/dist/animation/core/react/functions/getCssValue.d.ts +0 -8
package/dist/animation/core/react/functions/getNonAnimatableStyle.d.ts +0 -6
package/dist/animation/core/react/functions/index.d.ts +0 -7
package/dist/animation/core/react/functions/isDefined.d.ts +0 -6
package/dist/animation/core/react/functions/isTransitionValue.d.ts +0 -6
package/dist/animation/core/react/helpers/camelToDash.d.ts +0 -7
package/dist/animation/core/react/helpers/canInterpolate.d.ts +0 -7
package/dist/animation/core/react/helpers/getAnimatableObject.d.ts +0 -22
package/dist/animation/core/react/helpers/getCleanProps.d.ts +0 -4
package/dist/animation/core/react/helpers/getCssValue.d.ts +0 -8
package/dist/animation/core/react/helpers/getNonAnimatableStyle.d.ts +0 -6
package/dist/animation/core/react/helpers/index.d.ts +0 -7
package/dist/animation/core/react/helpers/isDefined.d.ts +0 -6
package/dist/animation/core/react/helpers/isFluidValue.d.ts +0 -6
package/dist/animation/core/react/helpers/isTransitionValue.d.ts +0 -6
package/dist/animation/core/react/useMounts.d.ts +0 -26
package/dist/animation/core/react/useTransition.d.ts +0 -9
package/dist/animation/core/react/useTransitions.d.ts +0 -11
package/dist/animation/core/types/animation.d.ts +0 -54
package/dist/animation/core/types/common.d.ts +0 -4
package/dist/animation/core/types/fluid.d.ts +0 -19
package/dist/animation/core/types/index.d.ts +0 -2
package/dist/animation/getInitialConfig.d.ts +0 -3
package/dist/animation/index.d.ts +0 -6
package/dist/animation/interpolation.d.ts +0 -21
package/dist/animation/modules/AnimatedBlock.d.ts +0 -8
package/dist/animation/modules/AnimatedImage.d.ts +0 -8
package/dist/animation/modules/AnimatedInline.d.ts +0 -8
package/dist/animation/modules/MountedBlock.d.ts +0 -29
package/dist/animation/modules/ScrollableBlock.d.ts +0 -21
package/dist/animation/modules/TransitionBlock.d.ts +0 -17
package/dist/animation/modules/index.d.ts +0 -6
package/dist/animation/useAnimatedValue.d.ts +0 -22
package/dist/animation/useMountedValue.d.ts +0 -15
package/dist/gestures/eventAttacher.d.ts +0 -11
package/dist/gestures/index.d.ts +0 -2
package/dist/gestures/math.d.ts +0 -34
package/dist/gestures/types.d.ts +0 -51
package/dist/gestures/withDefault.d.ts +0 -4
package/dist/utils/isDefined.d.ts +0 -1
package/ecosystem.config.js +0 -12
package/example/README.md +0 -46
package/example/package-lock.json +0 -19597
package/example/package.json +0 -45
package/example/public/favicon.ico +0 -0
package/example/public/index.html +0 -20
package/example/public/logo192.png +0 -0
package/example/public/logo512.png +0 -0
package/example/public/manifest.json +0 -25
package/example/public/robots.txt +0 -3
package/example/src/App.tsx +0 -41
package/example/src/components/Draggable.tsx +0 -46
package/example/src/components/Gestures.tsx +0 -151
package/example/src/components/Interpolation.tsx +0 -21
package/example/src/components/Loop.tsx +0 -48
package/example/src/components/MountedBlock.tsx +0 -25
package/example/src/components/MouseMove.tsx +0 -59
package/example/src/components/MultistageTransition.tsx +0 -34
package/example/src/components/Scroll.tsx +0 -39
package/example/src/components/ScrollableBlock.tsx +0 -27
package/example/src/components/SnapTo.tsx +0 -55
package/example/src/components/TransitionBlock.tsx +0 -37
package/example/src/components/Wheel.tsx +0 -39
package/example/src/components/index.ts +0 -18
package/example/src/components/svgLine.tsx +0 -48
package/example/src/components/useAnimatedValue.tsx +0 -57
package/example/src/components/useMountedValue.tsx +0 -62
package/example/src/index.css +0 -8
package/example/src/index.tsx +0 -16
package/example/tsconfig.json +0 -26
package/rollup.config.mjs +0 -18
package/src/animation/core/controllers/Animation.ts +0 -27
package/src/animation/core/controllers/FluidValue.ts +0 -97
package/src/animation/core/controllers/RequestAnimationFrame.ts +0 -13
package/src/animation/core/controllers/SpringAnimation.ts +0 -218
package/src/animation/core/controllers/TimingAnimation.ts +0 -152
package/src/animation/core/easing/Bezier.ts +0 -146
package/src/animation/core/easing/Easing.ts +0 -132
package/src/animation/core/helpers/camelCaseToKebabCase.ts +0 -10
package/src/animation/core/helpers/getCleanProps.ts +0 -16
package/src/animation/core/helpers/getCssValue.ts +0 -60
package/src/animation/core/helpers/index.ts +0 -5
package/src/animation/core/helpers/isDefined.ts +0 -14
package/src/animation/core/helpers/isFluidValue.ts +0 -11
package/src/animation/core/index.ts +0 -16
package/src/animation/core/interpolation/Colors.ts +0 -232
package/src/animation/core/interpolation/Interpolation.ts +0 -395
package/src/animation/core/interpolation/__tests__/Colors.test.tsx +0 -35
package/src/animation/core/react/fluid.ts +0 -197
package/src/animation/core/react/makeFluid.ts +0 -294
package/src/animation/core/react/transforms.ts +0 -90
package/src/animation/core/react/useFluidValue.ts +0 -43
package/src/animation/core/react/useMount.ts +0 -58
package/src/animation/core/types/animation.d.ts +0 -56
package/src/animation/core/types/common.d.ts +0 -4
package/src/animation/core/types/fluid.d.ts +0 -38
package/src/animation/lib/animationType.ts +0 -17
package/src/animation/lib/getInitialConfig.ts +0 -61
package/src/animation/lib/index.ts +0 -12
package/src/animation/lib/interpolation.ts +0 -47
package/src/animation/lib/modules/AnimatedBlock.ts +0 -8
package/src/animation/lib/modules/AnimatedImage.ts +0 -8
package/src/animation/lib/modules/AnimatedInline.ts +0 -8
package/src/animation/lib/modules/MountedBlock.tsx +0 -51
package/src/animation/lib/modules/ScrollableBlock.tsx +0 -68
package/src/animation/lib/modules/TransitionBlock.tsx +0 -28
package/src/animation/lib/modules/index.ts +0 -6
package/src/animation/lib/useAnimatedValue.ts +0 -60
package/src/animation/lib/useMountedValue.ts +0 -18
package/src/gestures/controllers/DragGesture.ts +0 -178
package/src/gestures/controllers/Gesture.ts +0 -54
package/src/gestures/controllers/MouseMoveGesture.ts +0 -111
package/src/gestures/controllers/ScrollGesture.ts +0 -107
package/src/gestures/controllers/WheelGesture.ts +0 -123
package/src/gestures/controllers/index.ts +0 -4
package/src/gestures/helpers/eventAttacher.ts +0 -67
package/src/gestures/helpers/index.ts +0 -1
package/src/gestures/helpers/math.ts +0 -120
package/src/gestures/helpers/withDefault.ts +0 -3
package/src/gestures/hooks/index.ts +0 -5
package/src/gestures/hooks/useDrag.ts +0 -14
package/src/gestures/hooks/useGesture.ts +0 -38
package/src/gestures/hooks/useMouseMove.ts +0 -11
package/src/gestures/hooks/useRecognizer.ts +0 -59
package/src/gestures/hooks/useScroll.ts +0 -11
package/src/gestures/hooks/useWheel.ts +0 -11
package/src/gestures/types/index.d.ts +0 -49
package/src/hooks/index.ts +0 -3
package/src/hooks/useMeasure.ts +0 -132
package/src/hooks/useOutsideClick.ts +0 -36
package/src/hooks/useWindowDimension.ts +0 -58
package/src/index.ts +0 -42
package/src/utils/delay.ts +0 -9
package/src/utils/index.ts +0 -1
package/tsconfig.json +0 -24

package/example/package.json DELETED Viewed

@@ -1,45 +0,0 @@
-{
-  "name": "example",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.101",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "react": "../node_modules/react",
-    "react-ui-animate": "..",
-    "react-dom": "^18.3.1",
-    "react-scripts": "^5.0.1",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

package/example/public/favicon.ico DELETED Viewed

Binary file

package/example/public/index.html DELETED Viewed

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <title>React UI Animate Examples</title>
-</head>
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-</body>
-</html>

package/example/public/logo192.png DELETED Viewed

Binary file

package/example/public/logo512.png DELETED Viewed

Binary file

package/example/public/manifest.json DELETED Viewed

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/example/public/robots.txt DELETED Viewed

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/example/src/App.tsx DELETED Viewed

@@ -1,41 +0,0 @@
-import {
-  // Draggable,
-  // Gestures,
-  // Interpolation,
-  Loop,
-  // Mounted,
-  // MouseMove,
-  // MultistageTransition,
-  // Scroll,
-  // SCBlock,
-  // SnapTo,
-  // SVGLine,
-  // TBExample,
-  // UseAnimatedValue,
-  // UseMountedValue,
-  // Wheel,
-} from './components';
-function App() {
-  return (
-    <div style={{ width: '80%', margin: '20px auto' }}>
-      {/* <Draggable />
-      <Gestures />
-      <Interpolation /> */}
-      <Loop />
-      {/* <Mounted />
-      <MouseMove />
-      <MultistageTransition />
-      <Scroll />
-      <SCBlock />
-      <SnapTo />
-      <SVGLine />
-      <TBExample /> */}
-      {/* <UseAnimatedValue />
-      <UseMountedValue /> */}
-      {/* <Wheel /> */}
-    </div>
-  );
-}
-export default App;

package/example/src/components/Draggable.tsx DELETED Viewed

@@ -1,46 +0,0 @@
-import React from 'react';
-import { useAnimatedValue, AnimatedBlock, useDrag } from 'react-ui-animate';
-export const Draggable = () => {
-  const [open, setOpen] = React.useState(false);
-  const translateX = useAnimatedValue(0);
-  const bind = useDrag(function ({ down, movementX }) {
-    if (open) {
-      translateX.value = down ? movementX : 0;
-    }
-  });
-  return (
-    <>
-      <button onClick={() => setOpen((prev) => !prev)}>
-        {open ? 'disable' : 'enable'}
-      </button>
-      <AnimatedBlock
-        {...bind()}
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: '#3399ff',
-          translateX: translateX.value,
-        }}
-      />
-      {/* {Array(5)
-        .fill(null)
-        .map((_, i) => (
-          <div
-            key={i}
-            {...bind(i)}
-            style={{
-              width: 100,
-              height: 100,
-              backgroundColor: "#3399ff",
-              marginBottom: 10,
-            }}
-          />
-        ))} */}
-    </>
-  );
-};

package/example/src/components/Gestures.tsx DELETED Viewed

@@ -1,151 +0,0 @@
-import React from 'react';
-import {
-  useAnimatedValue,
-  AnimatedBlock,
-  useGesture,
-  clamp,
-} from 'react-ui-animate';
-export const Gestures = () => {
-  const x = useAnimatedValue(0, { immediate: true });
-  const y = useAnimatedValue(0, { immediate: true });
-  const s = useAnimatedValue(1, { immediate: true });
-  const rotate = useAnimatedValue(0);
-  const scaleRef = React.useRef(1);
-  const rotateRef = React.useRef(0);
-  const bind = useGesture({
-    onDrag: function ({ offsetX, offsetY }) {
-      x.value = offsetX;
-      y.value = offsetY;
-    },
-    onWheel: function ({ deltaY }) {
-      scaleRef.current += deltaY * -0.001;
-      scaleRef.current = clamp(scaleRef.current, 0.125, 4);
-      s.value = scaleRef.current;
-    },
-  });
-  return (
-    <>
-      <div style={{ position: 'fixed', right: 0, bottom: 0 }}>
-        <button
-          onClick={() => {
-            rotateRef.current -= 90;
-            rotate.value = rotateRef.current;
-          }}
-        >
-          ROTATE LEFT
-        </button>
-        <button
-          onClick={() => {
-            rotateRef.current += 90;
-            rotate.value = rotateRef.current;
-          }}
-        >
-          ROTATE RIGHT
-        </button>
-      </div>
-      <div>
-        <AnimatedBlock
-          {...bind()}
-          style={{
-            width: 100,
-            height: 100,
-            position: 'fixed',
-            left: 0,
-            top: 0,
-            backgroundColor: '#3399ff',
-            translateX: x.value,
-            translateY: y.value,
-            scale: s.value,
-            rotateZ: rotate.value,
-            color: 'white',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            fontSize: 20,
-          }}
-        >
-          DIPESH
-        </AnimatedBlock>
-      </div>
-    </>
-  );
-};
-// import React from "react";
-// import { useSpring, animated } from "react-spring";
-// import { useGesture, clamp } from "react-ui-animate";
-// export const Gestures = () => {
-//   const [{ x, y, s, rotate }, api] = useSpring(() => ({
-//     x: 0,
-//     y: 0,
-//     s: 1,
-//     rotate: 0,
-//   }));
-//   const scaleRef = React.useRef(0);
-//   const rotateRef = React.useRef(0);
-//   const bind = useGesture({
-//     onDrag: function ({ offsetX, offsetY }) {
-//       api.start({ x: offsetX, y: offsetY });
-//     },
-//     onWheel: function ({ deltaY }) {
-//       scaleRef.current += deltaY * -0.01;
-//       scaleRef.current = clamp(scaleRef.current, 0.125, 4);
-//       api.start({ s: scaleRef.current });
-//     },
-//   });
-//   return (
-//     <>
-//       <div style={{ position: "fixed", right: 0, bottom: 0 }}>
-//         <button
-//           onClick={() => {
-//             rotateRef.current -= 90;
-//             api.start({ rotate: rotateRef.current });
-//           }}
-//         >
-//           ROTATE LEFT
-//         </button>
-//         <button
-//           onClick={() => {
-//             rotateRef.current += 90;
-//             api.start({ rotate: rotateRef.current });
-//           }}
-//         >
-//           ROTATE RIGHT
-//         </button>
-//       </div>
-//       <animated.div
-//         {...bind()}
-//         style={{
-//           width: 100,
-//           height: 100,
-//           position: "fixed",
-//           left: 0,
-//           top: 0,
-//           backgroundColor: "#3399ff",
-//           translateX: x,
-//           translateY: y,
-//           scale: s,
-//           rotate: rotate,
-//           color: "white",
-//           display: "flex",
-//           justifyContent: "center",
-//           alignItems: "center",
-//           fontSize: 20,
-//         }}
-//       >
-//         DIPESH
-//       </animated.div>
-//     </>
-//   );
-// };

package/example/src/components/Interpolation.tsx DELETED Viewed

@@ -1,21 +0,0 @@
-import { useState } from 'react';
-import { AnimatedBlock, useAnimatedValue } from 'react-ui-animate';
-export const Interpolation = () => {
-  const [open, setOpen] = useState(false);
-  const x = useAnimatedValue(open ? 500 : 0);
-  return (
-    <>
-      <AnimatedBlock
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: 'red',
-          translateX: x.value,
-        }}
-      />
-      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
-    </>
-  );
-};

package/example/src/components/Loop.tsx DELETED Viewed

@@ -1,48 +0,0 @@
-import { useEffect } from 'react';
-import {
-  AnimatedBlock,
-  useAnimatedValue,
-  useMouseMove,
-  fluid,
-} from 'react-ui-animate';
-export function Loop() {
-  const x = useAnimatedValue(0);
-  const rotateZ = useAnimatedValue(0, {
-    onRest: function ({ finished, value }: any) {
-      if (finished) {
-        if (value === 0) {
-          rotateZ.value = 360;
-        } else if (value === 360) {
-          rotateZ.value = 0;
-        }
-      }
-    },
-  });
-  useMouseMove(({ mouseX }) => {
-    x.value = mouseX;
-  });
-  useEffect(() => {
-    rotateZ.value = 360;
-  }, [rotateZ]);
-  return (
-    <AnimatedBlock
-      style={{
-        translateX: rotateZ.value,
-      }}
-    >
-      <fluid.div />
-      <AnimatedBlock
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: '#3399ff',
-          rotateZ: rotateZ.value,
-        }}
-      />
-    </AnimatedBlock>
-  );
-}

package/example/src/components/MountedBlock.tsx DELETED Viewed

@@ -1,25 +0,0 @@
-import React from 'react';
-import { MountedBlock, AnimatedBlock, bInterpolate } from 'react-ui-animate';
-export const Mounted: React.FC = () => {
-  const [open, setOpen] = React.useState(false);
-  return (
-    <>
-      <MountedBlock state={open}>
-        {(animation) => (
-          <AnimatedBlock
-            style={{
-              width: 100,
-              height: 100,
-              backgroundColor: '#3399ff',
-              translateX: bInterpolate(animation.value, 0, 500),
-            }}
-          />
-        )}
-      </MountedBlock>
-      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
-    </>
-  );
-};

package/example/src/components/MouseMove.tsx DELETED Viewed

@@ -1,59 +0,0 @@
-import React from 'react';
-import {
-  AnimatedBlock,
-  useAnimatedValue,
-  useMouseMove,
-} from 'react-ui-animate';
-export const MouseMove = () => {
-  const [open, setOpen] = React.useState(false);
-  const x = useAnimatedValue(0);
-  const y = useAnimatedValue(0);
-  const bind = useMouseMove(function ({ mouseX, mouseY }) {
-    if (open) {
-      x.value = mouseX;
-      y.value = mouseY;
-    }
-  });
-  return (
-    <>
-      <button
-        style={{ position: 'fixed', right: 0, bottom: 0 }}
-        onClick={() => setOpen((prev) => !prev)}
-      >
-        {open ? 'disable' : 'enable'}
-      </button>
-      <AnimatedBlock
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: '#ff0000',
-          translateX: x.value,
-          translateY: y.value,
-          position: 'fixed',
-          top: 0,
-          left: 0,
-        }}
-      />
-      <div style={{ height: 2000 }} />
-      {Array(5)
-        .fill(null)
-        .map((_, i) => (
-          <div
-            key={i}
-            {...bind(i)}
-            style={{
-              width: 100,
-              height: 100,
-              backgroundColor: '#3399ff',
-              marginBottom: 10,
-            }}
-          />
-        ))}
-    </>
-  );
-};

package/example/src/components/MultistageTransition.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import { AnimatedBlock, useAnimatedValue } from 'react-ui-animate';
-export const MultistageTransition = () => {
-  const x = useAnimatedValue(0);
-  return (
-    <>
-      <AnimatedBlock
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: 'red',
-          translateX: x.value,
-        }}
-      />
-      <button
-        onClick={() => {
-          x.value = 0;
-        }}
-      >
-        ANIMATE LEFT
-      </button>
-      <button
-        onClick={() => {
-          x.value = 0;
-        }}
-      >
-        ANIMATE RIGHT
-      </button>
-    </>
-  );
-};

package/example/src/components/Scroll.tsx DELETED Viewed

@@ -1,39 +0,0 @@
-import { useScroll } from 'react-ui-animate';
-export const Scroll = () => {
-  const bind = useScroll(function (event) {
-    console.log('SCROLL', event);
-  });
-  return (
-    <>
-      <div
-        {...bind()}
-        style={{
-          width: 500,
-          height: 500,
-          overflowY: 'auto',
-          backgroundColor: '#3399ff',
-        }}
-      >
-        <div style={{ height: 2000 }} />
-      </div>
-      <div style={{ height: 2000 }} />
-      {Array(5)
-        .fill(null)
-        .map((_, i) => (
-          <div
-            key={i}
-            style={{
-              width: 100,
-              height: 100,
-              backgroundColor: '#3399ff',
-              marginBottom: 10,
-            }}
-          />
-        ))}
-    </>
-  );
-};

package/example/src/components/ScrollableBlock.tsx DELETED Viewed

@@ -1,27 +0,0 @@
-import React from 'react';
-import { ScrollableBlock, AnimatedBlock, bInterpolate } from 'react-ui-animate';
-export const SCBlock: React.FC = () => {
-  return (
-    <>
-      <div style={{ height: 1000, backgroundColor: '#e1e1e1' }} />
-      <ScrollableBlock direction="both" threshold={0.5}>
-        {(animation) => (
-          <AnimatedBlock
-            style={{
-              height: 500,
-              backgroundColor: '#3399ff',
-              opacity: animation.value,
-              transform: bInterpolate(
-                animation.value,
-                'translateY(500px)',
-                'translateY(0px)'
-              ),
-            }}
-          />
-        )}
-      </ScrollableBlock>
-    </>
-  );
-};

package/example/src/components/SnapTo.tsx DELETED Viewed

@@ -1,55 +0,0 @@
-import { useRef } from 'react';
-import {
-  AnimatedBlock,
-  useDrag,
-  useAnimatedValue,
-  snapTo,
-  AnimationConfigUtils,
-} from 'react-ui-animate';
-import '../index.css';
-export function SnapTo() {
-  const x = useAnimatedValue(0, { ...AnimationConfigUtils.ELASTIC });
-  const y = useAnimatedValue(0, { ...AnimationConfigUtils.ELASTIC });
-  const offsetX = useRef(0);
-  const offsetY = useRef(0);
-  const bind = useDrag(
-    ({ movementX, movementY, velocityX, velocityY, down }) => {
-      if (!down) {
-        offsetX.current = movementX + offsetX.current;
-        offsetY.current = movementY + offsetY.current;
-        const snapX = snapTo(offsetX.current, velocityX, [0, 600]);
-        const snapY = snapTo(offsetY.current, velocityY, [0, 600]);
-        x.value = snapX;
-        y.value = snapY;
-        offsetX.current = snapX;
-        offsetY.current = snapY;
-      } else {
-        x.value = movementX + offsetX.current;
-        y.value = movementY + offsetY.current;
-      }
-    }
-  );
-  return (
-    <AnimatedBlock
-      {...bind()}
-      style={{
-        backgroundColor: '#3399ff',
-        width: 200,
-        height: 200,
-        position: 'fixed',
-        left: x.value,
-        top: y.value,
-        boxShadow: '0px 4px 6px rgba(0,0,0,0.2)',
-        borderRadius: 10,
-        cursor: 'grab',
-      }}
-    />
-  );
-}

package/example/src/components/TransitionBlock.tsx DELETED Viewed

@@ -1,37 +0,0 @@
-import { useState } from 'react';
-import { TransitionBlock, AnimatedBlock, bInterpolate } from 'react-ui-animate';
-export function TBExample() {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <button onClick={() => setOpen((prev) => !prev)}>ANIMTE</button>
-      <TransitionBlock state={open}>
-        {(animation) => {
-          return (
-            <>
-              <AnimatedBlock
-                style={{
-                  width: 100,
-                  height: 100,
-                  backgroundColor: 'red',
-                  translateX: bInterpolate(animation.value, 0, 500),
-                }}
-              />
-              <AnimatedBlock
-                style={{
-                  width: 100,
-                  height: 100,
-                  backgroundColor: 'red',
-                  translateX: bInterpolate(animation.value, 0, 500),
-                  marginTop: 10,
-                }}
-              />
-            </>
-          );
-        }}
-      </TransitionBlock>
-    </>
-  );
-}