react-ui-animate 2.0.0-rc.7 → 3.0.0-rc.0

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 (222) hide show
  1. package/.vscode/settings.json +3 -3
  2. package/LICENSE +21 -21
  3. package/README.md +115 -115
  4. package/dist/animation/animationType.d.ts +15 -15
  5. package/dist/animation/core/animation/Animation.d.ts +16 -0
  6. package/dist/animation/core/animation/FluidValue.d.ts +21 -0
  7. package/dist/animation/core/animation/RequestAnimationFrame.d.ts +8 -0
  8. package/dist/animation/core/animation/SpringAnimation.d.ts +41 -0
  9. package/dist/animation/core/animation/TimingAnimation.d.ts +35 -0
  10. package/dist/animation/core/animation/TransitionValue.d.ts +21 -0
  11. package/dist/animation/core/controllers/Animation.d.ts +16 -0
  12. package/dist/animation/core/controllers/FluidValue.d.ts +32 -0
  13. package/dist/animation/core/controllers/RequestAnimationFrame.d.ts +8 -0
  14. package/dist/animation/core/controllers/SpringAnimation.d.ts +41 -0
  15. package/dist/animation/core/controllers/TimingAnimation.d.ts +35 -0
  16. package/dist/animation/core/easing/Bezier.d.ts +8 -0
  17. package/dist/animation/core/easing/Easing.d.ts +40 -0
  18. package/dist/animation/core/helpers/camelCaseToKebabCase.d.ts +8 -0
  19. package/dist/animation/core/helpers/camelToDash.d.ts +7 -0
  20. package/dist/animation/core/helpers/canInterpolate.d.ts +11 -0
  21. package/dist/animation/core/helpers/getAnimatableObject.d.ts +22 -0
  22. package/dist/animation/core/helpers/getCleanProps.d.ts +10 -0
  23. package/dist/animation/core/helpers/getCssValue.d.ts +8 -0
  24. package/dist/animation/core/helpers/getNonAnimatableStyle.d.ts +6 -0
  25. package/dist/animation/core/helpers/index.d.ts +5 -0
  26. package/dist/animation/core/helpers/isDefined.d.ts +12 -0
  27. package/dist/animation/core/helpers/isFluidValue.d.ts +6 -0
  28. package/dist/animation/core/index.d.ts +11 -0
  29. package/dist/animation/core/interpolation/Colors.d.ts +25 -0
  30. package/dist/animation/core/interpolation/Interpolation.d.ts +80 -0
  31. package/dist/animation/core/interpolation/__tests__/Colors.test.d.ts +1 -0
  32. package/dist/animation/core/react/Tags.d.ts +3 -0
  33. package/dist/animation/core/react/TransformStyles.d.ts +8 -0
  34. package/dist/animation/core/react/animated.d.ts +29 -0
  35. package/dist/animation/core/react/combineRefs.d.ts +2 -0
  36. package/dist/animation/core/react/fluid.d.ts +6 -0
  37. package/dist/animation/core/react/functions/camelToDash.d.ts +7 -0
  38. package/dist/animation/core/react/functions/getAnimatableObject.d.ts +22 -0
  39. package/dist/animation/core/react/functions/getCleanProps.d.ts +4 -0
  40. package/dist/animation/core/react/functions/getCssValue.d.ts +8 -0
  41. package/dist/animation/core/react/functions/getNonAnimatableStyle.d.ts +6 -0
  42. package/dist/animation/core/react/functions/index.d.ts +7 -0
  43. package/dist/animation/core/react/functions/isDefined.d.ts +6 -0
  44. package/dist/animation/core/react/functions/isTransitionValue.d.ts +6 -0
  45. package/dist/animation/core/react/helpers/camelToDash.d.ts +7 -0
  46. package/dist/animation/core/react/helpers/canInterpolate.d.ts +7 -0
  47. package/dist/animation/core/react/helpers/getAnimatableObject.d.ts +22 -0
  48. package/dist/animation/core/react/helpers/getCleanProps.d.ts +4 -0
  49. package/dist/animation/core/react/helpers/getCssValue.d.ts +8 -0
  50. package/dist/animation/core/react/helpers/getNonAnimatableStyle.d.ts +6 -0
  51. package/dist/animation/core/react/helpers/index.d.ts +7 -0
  52. package/dist/animation/core/react/helpers/isDefined.d.ts +6 -0
  53. package/dist/animation/core/react/helpers/isFluidValue.d.ts +6 -0
  54. package/dist/animation/core/react/helpers/isTransitionValue.d.ts +6 -0
  55. package/dist/animation/core/react/makeFluid.d.ts +30 -0
  56. package/dist/animation/core/react/transforms.d.ts +6 -0
  57. package/dist/animation/core/react/useFluidValue.d.ts +9 -0
  58. package/dist/animation/core/react/useMount.d.ts +20 -0
  59. package/dist/animation/core/react/useMounts.d.ts +26 -0
  60. package/dist/animation/core/react/useTransition.d.ts +9 -0
  61. package/dist/animation/core/react/useTransitions.d.ts +11 -0
  62. package/dist/animation/core/types/animation.d.ts +54 -0
  63. package/dist/animation/core/types/common.d.ts +4 -0
  64. package/dist/animation/core/types/fluid.d.ts +19 -0
  65. package/dist/animation/core/types/index.d.ts +2 -0
  66. package/dist/animation/getInitialConfig.d.ts +3 -3
  67. package/dist/animation/index.d.ts +6 -6
  68. package/dist/animation/interpolation.d.ts +21 -21
  69. package/dist/animation/lib/animationType.d.ts +15 -0
  70. package/dist/animation/lib/getInitialConfig.d.ts +3 -0
  71. package/dist/animation/lib/index.d.ts +5 -0
  72. package/dist/animation/lib/interpolation.d.ts +20 -0
  73. package/dist/animation/lib/modules/AnimatedBlock.d.ts +8 -0
  74. package/dist/animation/lib/modules/AnimatedImage.d.ts +8 -0
  75. package/dist/animation/lib/modules/AnimatedInline.d.ts +8 -0
  76. package/dist/animation/lib/modules/MountedBlock.d.ts +29 -0
  77. package/dist/animation/lib/modules/ScrollableBlock.d.ts +22 -0
  78. package/dist/animation/lib/modules/TransitionBlock.d.ts +18 -0
  79. package/dist/animation/lib/modules/index.d.ts +6 -0
  80. package/dist/animation/lib/useAnimatedValue.d.ts +17 -0
  81. package/dist/animation/lib/useMountedValue.d.ts +14 -0
  82. package/dist/animation/modules/AnimatedBlock.d.ts +8 -8
  83. package/dist/animation/modules/AnimatedImage.d.ts +8 -8
  84. package/dist/animation/modules/AnimatedInline.d.ts +8 -8
  85. package/dist/animation/modules/MountedBlock.d.ts +29 -18
  86. package/dist/animation/modules/ScrollableBlock.d.ts +21 -21
  87. package/dist/animation/modules/TransitionBlock.d.ts +17 -17
  88. package/dist/animation/modules/index.d.ts +6 -6
  89. package/dist/animation/useAnimatedValue.d.ts +22 -22
  90. package/dist/animation/useMountedValue.d.ts +15 -15
  91. package/dist/gestures/controllers/DragGesture.d.ts +17 -17
  92. package/dist/gestures/controllers/Gesture.d.ts +20 -20
  93. package/dist/gestures/controllers/MouseMoveGesture.d.ts +13 -13
  94. package/dist/gestures/controllers/ScrollGesture.d.ts +14 -14
  95. package/dist/gestures/controllers/WheelGesture.d.ts +15 -15
  96. package/dist/gestures/controllers/index.d.ts +4 -4
  97. package/dist/gestures/eventAttacher.d.ts +11 -11
  98. package/dist/gestures/helpers/eventAttacher.d.ts +11 -0
  99. package/dist/gestures/helpers/index.d.ts +1 -0
  100. package/dist/gestures/helpers/math.d.ts +34 -0
  101. package/dist/gestures/helpers/withDefault.d.ts +4 -0
  102. package/dist/gestures/hooks/index.d.ts +5 -5
  103. package/dist/gestures/hooks/useDrag.d.ts +4 -4
  104. package/dist/gestures/hooks/useGesture.d.ts +9 -9
  105. package/dist/gestures/hooks/useMouseMove.d.ts +4 -4
  106. package/dist/gestures/hooks/useRecognizer.d.ts +10 -10
  107. package/dist/gestures/hooks/useScroll.d.ts +4 -4
  108. package/dist/gestures/hooks/useWheel.d.ts +4 -4
  109. package/dist/gestures/index.d.ts +2 -2
  110. package/dist/gestures/math.d.ts +34 -34
  111. package/dist/gestures/types.d.ts +51 -51
  112. package/dist/gestures/withDefault.d.ts +4 -4
  113. package/dist/hooks/index.d.ts +3 -3
  114. package/dist/hooks/useMeasure.d.ts +14 -14
  115. package/dist/hooks/useOutsideClick.d.ts +2 -2
  116. package/dist/hooks/useWindowDimension.d.ts +9 -9
  117. package/dist/index.d.ts +9 -5
  118. package/dist/index.js +2758 -1052
  119. package/dist/index.js.map +1 -1
  120. package/dist/utils/delay.d.ts +5 -5
  121. package/dist/utils/index.d.ts +1 -2
  122. package/dist/utils/isDefined.d.ts +1 -1
  123. package/ecosystem.config.js +12 -0
  124. package/example/README.md +46 -0
  125. package/example/package-lock.json +19597 -0
  126. package/example/package.json +45 -0
  127. package/example/public/favicon.ico +0 -0
  128. package/example/public/index.html +20 -0
  129. package/example/public/logo192.png +0 -0
  130. package/example/public/logo512.png +0 -0
  131. package/example/public/manifest.json +25 -0
  132. package/example/public/robots.txt +3 -0
  133. package/example/src/App.tsx +41 -0
  134. package/example/src/components/Draggable.tsx +46 -0
  135. package/example/src/components/Gestures.tsx +151 -0
  136. package/example/src/components/Interpolation.tsx +21 -0
  137. package/example/src/components/Loop.tsx +48 -0
  138. package/example/src/components/MountedBlock.tsx +25 -0
  139. package/example/src/components/MouseMove.tsx +59 -0
  140. package/example/src/components/MultistageTransition.tsx +34 -0
  141. package/example/src/components/Scroll.tsx +39 -0
  142. package/example/src/components/ScrollableBlock.tsx +27 -0
  143. package/example/src/components/SnapTo.tsx +55 -0
  144. package/example/src/components/TransitionBlock.tsx +37 -0
  145. package/example/src/components/Wheel.tsx +39 -0
  146. package/example/src/components/index.ts +18 -0
  147. package/example/src/components/svgLine.tsx +48 -0
  148. package/example/src/components/useAnimatedValue.tsx +57 -0
  149. package/example/src/components/useMountedValue.tsx +62 -0
  150. package/example/src/index.css +8 -0
  151. package/example/src/index.tsx +16 -0
  152. package/example/tsconfig.json +26 -0
  153. package/package.json +48 -48
  154. package/{rollup.config.js → rollup.config.mjs} +18 -18
  155. package/src/animation/core/controllers/Animation.ts +27 -0
  156. package/src/animation/core/controllers/FluidValue.ts +97 -0
  157. package/src/animation/core/controllers/RequestAnimationFrame.ts +13 -0
  158. package/src/animation/core/controllers/SpringAnimation.ts +218 -0
  159. package/src/animation/core/controllers/TimingAnimation.ts +152 -0
  160. package/src/animation/core/easing/Bezier.ts +146 -0
  161. package/src/animation/core/easing/Easing.ts +132 -0
  162. package/src/animation/core/helpers/camelCaseToKebabCase.ts +10 -0
  163. package/src/animation/core/helpers/getCleanProps.ts +16 -0
  164. package/src/animation/core/helpers/getCssValue.ts +60 -0
  165. package/src/animation/core/helpers/index.ts +5 -0
  166. package/src/animation/core/helpers/isDefined.ts +14 -0
  167. package/src/animation/core/helpers/isFluidValue.ts +11 -0
  168. package/src/animation/core/index.ts +16 -0
  169. package/src/animation/core/interpolation/Colors.ts +232 -0
  170. package/src/animation/core/interpolation/Interpolation.ts +395 -0
  171. package/src/animation/core/interpolation/__tests__/Colors.test.tsx +35 -0
  172. package/src/animation/core/react/fluid.ts +197 -0
  173. package/src/animation/core/react/makeFluid.ts +294 -0
  174. package/src/animation/core/react/transforms.ts +90 -0
  175. package/src/animation/core/react/useFluidValue.ts +43 -0
  176. package/src/animation/core/react/useMount.ts +58 -0
  177. package/src/animation/core/types/animation.d.ts +56 -0
  178. package/src/animation/core/types/common.d.ts +4 -0
  179. package/src/animation/core/types/fluid.d.ts +38 -0
  180. package/src/animation/{animationType.ts → lib/animationType.ts} +17 -17
  181. package/src/animation/{getInitialConfig.ts → lib/getInitialConfig.ts} +61 -61
  182. package/src/animation/lib/index.ts +12 -0
  183. package/src/animation/{interpolation.ts → lib/interpolation.ts} +47 -48
  184. package/src/animation/{modules → lib/modules}/AnimatedBlock.ts +8 -8
  185. package/src/animation/{modules → lib/modules}/AnimatedImage.ts +8 -8
  186. package/src/animation/{modules → lib/modules}/AnimatedInline.ts +8 -8
  187. package/src/animation/lib/modules/MountedBlock.tsx +51 -0
  188. package/src/animation/{modules → lib/modules}/ScrollableBlock.tsx +68 -69
  189. package/src/animation/{modules → lib/modules}/TransitionBlock.tsx +28 -29
  190. package/src/animation/{modules → lib/modules}/index.ts +6 -6
  191. package/src/animation/{useAnimatedValue.ts → lib/useAnimatedValue.ts} +60 -71
  192. package/src/animation/{useMountedValue.ts → lib/useMountedValue.ts} +18 -19
  193. package/src/gestures/controllers/DragGesture.ts +178 -177
  194. package/src/gestures/controllers/Gesture.ts +54 -54
  195. package/src/gestures/controllers/MouseMoveGesture.ts +111 -111
  196. package/src/gestures/controllers/ScrollGesture.ts +107 -107
  197. package/src/gestures/controllers/WheelGesture.ts +123 -123
  198. package/src/gestures/controllers/index.ts +4 -4
  199. package/src/gestures/{eventAttacher.ts → helpers/eventAttacher.ts} +67 -67
  200. package/src/gestures/helpers/index.ts +1 -0
  201. package/src/gestures/{math.ts → helpers/math.ts} +120 -120
  202. package/src/gestures/{withDefault.ts → helpers/withDefault.ts} +3 -3
  203. package/src/gestures/hooks/index.ts +5 -5
  204. package/src/gestures/hooks/useDrag.ts +14 -14
  205. package/src/gestures/hooks/useGesture.ts +38 -38
  206. package/src/gestures/hooks/useMouseMove.ts +11 -11
  207. package/src/gestures/hooks/useRecognizer.ts +59 -59
  208. package/src/gestures/hooks/useScroll.ts +11 -11
  209. package/src/gestures/hooks/useWheel.ts +11 -11
  210. package/src/gestures/{types.ts → types/index.d.ts} +49 -49
  211. package/src/hooks/index.ts +3 -3
  212. package/src/hooks/useMeasure.ts +132 -133
  213. package/src/hooks/useOutsideClick.ts +36 -36
  214. package/src/hooks/useWindowDimension.ts +58 -59
  215. package/src/index.ts +42 -5
  216. package/src/utils/delay.ts +9 -9
  217. package/src/utils/index.ts +1 -2
  218. package/tsconfig.json +24 -25
  219. package/src/animation/index.ts +0 -10
  220. package/src/animation/modules/MountedBlock.tsx +0 -25
  221. package/src/gestures/index.ts +0 -2
  222. package/src/utils/isDefined.ts +0 -4
package/example/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "example",
3
+ "version": "0.1.0",
4
+ "private": true,
5
+ "dependencies": {
6
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
7
+ "@testing-library/jest-dom": "^5.17.0",
8
+ "@testing-library/react": "^13.4.0",
9
+ "@testing-library/user-event": "^13.5.0",
10
+ "@types/jest": "^27.5.2",
11
+ "@types/node": "^16.18.101",
12
+ "@types/react": "^18.3.3",
13
+ "@types/react-dom": "^18.3.0",
14
+ "react": "../node_modules/react",
15
+ "react-ui-animate": "..",
16
+ "react-dom": "^18.3.1",
17
+ "react-scripts": "^5.0.1",
18
+ "typescript": "^4.9.5",
19
+ "web-vitals": "^2.1.4"
20
+ },
21
+ "scripts": {
22
+ "start": "react-scripts start",
23
+ "build": "react-scripts build",
24
+ "test": "react-scripts test",
25
+ "eject": "react-scripts eject"
26
+ },
27
+ "eslintConfig": {
28
+ "extends": [
29
+ "react-app",
30
+ "react-app/jest"
31
+ ]
32
+ },
33
+ "browserslist": {
34
+ "production": [
35
+ ">0.2%",
36
+ "not dead",
37
+ "not op_mini all"
38
+ ],
39
+ "development": [
40
+ "last 1 chrome version",
41
+ "last 1 firefox version",
42
+ "last 1 safari version"
43
+ ]
44
+ }
45
+ }
package/example/public/favicon.ico ADDED
Binary file
package/example/public/index.html ADDED
@@ -0,0 +1,20 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <meta name="theme-color" content="#000000" />
9
+ <meta name="description" content="Web site created using create-react-app" />
10
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12
+ <title>React UI Animate Examples</title>
13
+ </head>
14
+
15
+ <body>
16
+ <noscript>You need to enable JavaScript to run this app.</noscript>
17
+ <div id="root"></div>
18
+ </body>
19
+
20
+ </html>
package/example/public/logo192.png ADDED
Binary file
package/example/public/logo512.png ADDED
Binary file
package/example/public/manifest.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "short_name": "React App",
3
+ "name": "Create React App Sample",
4
+ "icons": [
5
+ {
6
+ "src": "favicon.ico",
7
+ "sizes": "64x64 32x32 24x24 16x16",
8
+ "type": "image/x-icon"
9
+ },
10
+ {
11
+ "src": "logo192.png",
12
+ "type": "image/png",
13
+ "sizes": "192x192"
14
+ },
15
+ {
16
+ "src": "logo512.png",
17
+ "type": "image/png",
18
+ "sizes": "512x512"
19
+ }
20
+ ],
21
+ "start_url": ".",
22
+ "display": "standalone",
23
+ "theme_color": "#000000",
24
+ "background_color": "#ffffff"
25
+ }
package/example/public/robots.txt ADDED
@@ -0,0 +1,3 @@
1
+ # https://www.robotstxt.org/robotstxt.html
2
+ User-agent: *
3
+ Disallow:
package/example/src/App.tsx ADDED
@@ -0,0 +1,41 @@
1
+ import {
2
+ // Draggable,
3
+ // Gestures,
4
+ // Interpolation,
5
+ Loop,
6
+ // Mounted,
7
+ // MouseMove,
8
+ // MultistageTransition,
9
+ // Scroll,
10
+ // SCBlock,
11
+ // SnapTo,
12
+ // SVGLine,
13
+ // TBExample,
14
+ // UseAnimatedValue,
15
+ // UseMountedValue,
16
+ // Wheel,
17
+ } from './components';
18
+
19
+ function App() {
20
+ return (
21
+ <div style={{ width: '80%', margin: '20px auto' }}>
22
+ {/* <Draggable />
23
+ <Gestures />
24
+ <Interpolation /> */}
25
+ <Loop />
26
+ {/* <Mounted />
27
+ <MouseMove />
28
+ <MultistageTransition />
29
+ <Scroll />
30
+ <SCBlock />
31
+ <SnapTo />
32
+ <SVGLine />
33
+ <TBExample /> */}
34
+ {/* <UseAnimatedValue />
35
+ <UseMountedValue /> */}
36
+ {/* <Wheel /> */}
37
+ </div>
38
+ );
39
+ }
40
+
41
+ export default App;
package/example/src/components/Draggable.tsx ADDED
@@ -0,0 +1,46 @@
1
+ import React from 'react';
2
+ import { useAnimatedValue, AnimatedBlock, useDrag } from 'react-ui-animate';
3
+
4
+ export const Draggable = () => {
5
+ const [open, setOpen] = React.useState(false);
6
+ const translateX = useAnimatedValue(0);
7
+
8
+ const bind = useDrag(function ({ down, movementX }) {
9
+ if (open) {
10
+ translateX.value = down ? movementX : 0;
11
+ }
12
+ });
13
+
14
+ return (
15
+ <>
16
+ <button onClick={() => setOpen((prev) => !prev)}>
17
+ {open ? 'disable' : 'enable'}
18
+ </button>
19
+
20
+ <AnimatedBlock
21
+ {...bind()}
22
+ style={{
23
+ width: 100,
24
+ height: 100,
25
+ backgroundColor: '#3399ff',
26
+ translateX: translateX.value,
27
+ }}
28
+ />
29
+
30
+ {/* {Array(5)
31
+ .fill(null)
32
+ .map((_, i) => (
33
+ <div
34
+ key={i}
35
+ {...bind(i)}
36
+ style={{
37
+ width: 100,
38
+ height: 100,
39
+ backgroundColor: "#3399ff",
40
+ marginBottom: 10,
41
+ }}
42
+ />
43
+ ))} */}
44
+ </>
45
+ );
46
+ };
package/example/src/components/Gestures.tsx ADDED
@@ -0,0 +1,151 @@
1
+ import React from 'react';
2
+ import {
3
+ useAnimatedValue,
4
+ AnimatedBlock,
5
+ useGesture,
6
+ clamp,
7
+ } from 'react-ui-animate';
8
+
9
+ export const Gestures = () => {
10
+ const x = useAnimatedValue(0, { immediate: true });
11
+ const y = useAnimatedValue(0, { immediate: true });
12
+ const s = useAnimatedValue(1, { immediate: true });
13
+ const rotate = useAnimatedValue(0);
14
+ const scaleRef = React.useRef(1);
15
+ const rotateRef = React.useRef(0);
16
+
17
+ const bind = useGesture({
18
+ onDrag: function ({ offsetX, offsetY }) {
19
+ x.value = offsetX;
20
+ y.value = offsetY;
21
+ },
22
+ onWheel: function ({ deltaY }) {
23
+ scaleRef.current += deltaY * -0.001;
24
+ scaleRef.current = clamp(scaleRef.current, 0.125, 4);
25
+
26
+ s.value = scaleRef.current;
27
+ },
28
+ });
29
+
30
+ return (
31
+ <>
32
+ <div style={{ position: 'fixed', right: 0, bottom: 0 }}>
33
+ <button
34
+ onClick={() => {
35
+ rotateRef.current -= 90;
36
+ rotate.value = rotateRef.current;
37
+ }}
38
+ >
39
+ ROTATE LEFT
40
+ </button>
41
+ <button
42
+ onClick={() => {
43
+ rotateRef.current += 90;
44
+ rotate.value = rotateRef.current;
45
+ }}
46
+ >
47
+ ROTATE RIGHT
48
+ </button>
49
+ </div>
50
+
51
+ <div>
52
+ <AnimatedBlock
53
+ {...bind()}
54
+ style={{
55
+ width: 100,
56
+ height: 100,
57
+ position: 'fixed',
58
+ left: 0,
59
+ top: 0,
60
+ backgroundColor: '#3399ff',
61
+ translateX: x.value,
62
+ translateY: y.value,
63
+ scale: s.value,
64
+ rotateZ: rotate.value,
65
+ color: 'white',
66
+ display: 'flex',
67
+ justifyContent: 'center',
68
+ alignItems: 'center',
69
+ fontSize: 20,
70
+ }}
71
+ >
72
+ DIPESH
73
+ </AnimatedBlock>
74
+ </div>
75
+ </>
76
+ );
77
+ };
78
+
79
+ // import React from "react";
80
+ // import { useSpring, animated } from "react-spring";
81
+ // import { useGesture, clamp } from "react-ui-animate";
82
+
83
+ // export const Gestures = () => {
84
+ // const [{ x, y, s, rotate }, api] = useSpring(() => ({
85
+ // x: 0,
86
+ // y: 0,
87
+ // s: 1,
88
+ // rotate: 0,
89
+ // }));
90
+
91
+ // const scaleRef = React.useRef(0);
92
+ // const rotateRef = React.useRef(0);
93
+
94
+ // const bind = useGesture({
95
+ // onDrag: function ({ offsetX, offsetY }) {
96
+ // api.start({ x: offsetX, y: offsetY });
97
+ // },
98
+ // onWheel: function ({ deltaY }) {
99
+ // scaleRef.current += deltaY * -0.01;
100
+ // scaleRef.current = clamp(scaleRef.current, 0.125, 4);
101
+
102
+ // api.start({ s: scaleRef.current });
103
+ // },
104
+ // });
105
+
106
+ // return (
107
+ // <>
108
+ // <div style={{ position: "fixed", right: 0, bottom: 0 }}>
109
+ // <button
110
+ // onClick={() => {
111
+ // rotateRef.current -= 90;
112
+ // api.start({ rotate: rotateRef.current });
113
+ // }}
114
+ // >
115
+ // ROTATE LEFT
116
+ // </button>
117
+ // <button
118
+ // onClick={() => {
119
+ // rotateRef.current += 90;
120
+ // api.start({ rotate: rotateRef.current });
121
+ // }}
122
+ // >
123
+ // ROTATE RIGHT
124
+ // </button>
125
+ // </div>
126
+
127
+ // <animated.div
128
+ // {...bind()}
129
+ // style={{
130
+ // width: 100,
131
+ // height: 100,
132
+ // position: "fixed",
133
+ // left: 0,
134
+ // top: 0,
135
+ // backgroundColor: "#3399ff",
136
+ // translateX: x,
137
+ // translateY: y,
138
+ // scale: s,
139
+ // rotate: rotate,
140
+ // color: "white",
141
+ // display: "flex",
142
+ // justifyContent: "center",
143
+ // alignItems: "center",
144
+ // fontSize: 20,
145
+ // }}
146
+ // >
147
+ // DIPESH
148
+ // </animated.div>
149
+ // </>
150
+ // );
151
+ // };
package/example/src/components/Interpolation.tsx ADDED
@@ -0,0 +1,21 @@
1
+ import { useState } from 'react';
2
+ import { AnimatedBlock, useAnimatedValue } from 'react-ui-animate';
3
+
4
+ export const Interpolation = () => {
5
+ const [open, setOpen] = useState(false);
6
+ const x = useAnimatedValue(open ? 500 : 0);
7
+ return (
8
+ <>
9
+ <AnimatedBlock
10
+ style={{
11
+ width: 100,
12
+ height: 100,
13
+ backgroundColor: 'red',
14
+ translateX: x.value,
15
+ }}
16
+ />
17
+
18
+ <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
19
+ </>
20
+ );
21
+ };
package/example/src/components/Loop.tsx ADDED
@@ -0,0 +1,48 @@
1
+ import { useEffect } from 'react';
2
+ import {
3
+ AnimatedBlock,
4
+ useAnimatedValue,
5
+ useMouseMove,
6
+ fluid,
7
+ } from 'react-ui-animate';
8
+
9
+ export function Loop() {
10
+ const x = useAnimatedValue(0);
11
+ const rotateZ = useAnimatedValue(0, {
12
+ onRest: function ({ finished, value }: any) {
13
+ if (finished) {
14
+ if (value === 0) {
15
+ rotateZ.value = 360;
16
+ } else if (value === 360) {
17
+ rotateZ.value = 0;
18
+ }
19
+ }
20
+ },
21
+ });
22
+
23
+ useMouseMove(({ mouseX }) => {
24
+ x.value = mouseX;
25
+ });
26
+
27
+ useEffect(() => {
28
+ rotateZ.value = 360;
29
+ }, [rotateZ]);
30
+
31
+ return (
32
+ <AnimatedBlock
33
+ style={{
34
+ translateX: rotateZ.value,
35
+ }}
36
+ >
37
+ <fluid.div />
38
+ <AnimatedBlock
39
+ style={{
40
+ width: 100,
41
+ height: 100,
42
+ backgroundColor: '#3399ff',
43
+ rotateZ: rotateZ.value,
44
+ }}
45
+ />
46
+ </AnimatedBlock>
47
+ );
48
+ }
package/example/src/components/MountedBlock.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import { MountedBlock, AnimatedBlock, bInterpolate } from 'react-ui-animate';
3
+
4
+ export const Mounted: React.FC = () => {
5
+ const [open, setOpen] = React.useState(false);
6
+
7
+ return (
8
+ <>
9
+ <MountedBlock state={open}>
10
+ {(animation) => (
11
+ <AnimatedBlock
12
+ style={{
13
+ width: 100,
14
+ height: 100,
15
+ backgroundColor: '#3399ff',
16
+ translateX: bInterpolate(animation.value, 0, 500),
17
+ }}
18
+ />
19
+ )}
20
+ </MountedBlock>
21
+
22
+ <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
23
+ </>
24
+ );
25
+ };
package/example/src/components/MouseMove.tsx ADDED
@@ -0,0 +1,59 @@
1
+ import React from 'react';
2
+ import {
3
+ AnimatedBlock,
4
+ useAnimatedValue,
5
+ useMouseMove,
6
+ } from 'react-ui-animate';
7
+
8
+ export const MouseMove = () => {
9
+ const [open, setOpen] = React.useState(false);
10
+ const x = useAnimatedValue(0);
11
+ const y = useAnimatedValue(0);
12
+
13
+ const bind = useMouseMove(function ({ mouseX, mouseY }) {
14
+ if (open) {
15
+ x.value = mouseX;
16
+ y.value = mouseY;
17
+ }
18
+ });
19
+
20
+ return (
21
+ <>
22
+ <button
23
+ style={{ position: 'fixed', right: 0, bottom: 0 }}
24
+ onClick={() => setOpen((prev) => !prev)}
25
+ >
26
+ {open ? 'disable' : 'enable'}
27
+ </button>
28
+
29
+ <AnimatedBlock
30
+ style={{
31
+ width: 100,
32
+ height: 100,
33
+ backgroundColor: '#ff0000',
34
+ translateX: x.value,
35
+ translateY: y.value,
36
+ position: 'fixed',
37
+ top: 0,
38
+ left: 0,
39
+ }}
40
+ />
41
+ <div style={{ height: 2000 }} />
42
+
43
+ {Array(5)
44
+ .fill(null)
45
+ .map((_, i) => (
46
+ <div
47
+ key={i}
48
+ {...bind(i)}
49
+ style={{
50
+ width: 100,
51
+ height: 100,
52
+ backgroundColor: '#3399ff',
53
+ marginBottom: 10,
54
+ }}
55
+ />
56
+ ))}
57
+ </>
58
+ );
59
+ };
package/example/src/components/MultistageTransition.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import { AnimatedBlock, useAnimatedValue } from 'react-ui-animate';
2
+
3
+ export const MultistageTransition = () => {
4
+ const x = useAnimatedValue(0);
5
+
6
+ return (
7
+ <>
8
+ <AnimatedBlock
9
+ style={{
10
+ width: 100,
11
+ height: 100,
12
+ backgroundColor: 'red',
13
+ translateX: x.value,
14
+ }}
15
+ />
16
+
17
+ <button
18
+ onClick={() => {
19
+ x.value = 0;
20
+ }}
21
+ >
22
+ ANIMATE LEFT
23
+ </button>
24
+
25
+ <button
26
+ onClick={() => {
27
+ x.value = 0;
28
+ }}
29
+ >
30
+ ANIMATE RIGHT
31
+ </button>
32
+ </>
33
+ );
34
+ };
package/example/src/components/Scroll.tsx ADDED
@@ -0,0 +1,39 @@
1
+ import { useScroll } from 'react-ui-animate';
2
+
3
+ export const Scroll = () => {
4
+ const bind = useScroll(function (event) {
5
+ console.log('SCROLL', event);
6
+ });
7
+
8
+ return (
9
+ <>
10
+ <div
11
+ {...bind()}
12
+ style={{
13
+ width: 500,
14
+ height: 500,
15
+ overflowY: 'auto',
16
+ backgroundColor: '#3399ff',
17
+ }}
18
+ >
19
+ <div style={{ height: 2000 }} />
20
+ </div>
21
+
22
+ <div style={{ height: 2000 }} />
23
+
24
+ {Array(5)
25
+ .fill(null)
26
+ .map((_, i) => (
27
+ <div
28
+ key={i}
29
+ style={{
30
+ width: 100,
31
+ height: 100,
32
+ backgroundColor: '#3399ff',
33
+ marginBottom: 10,
34
+ }}
35
+ />
36
+ ))}
37
+ </>
38
+ );
39
+ };
package/example/src/components/ScrollableBlock.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+ import { ScrollableBlock, AnimatedBlock, bInterpolate } from 'react-ui-animate';
3
+
4
+ export const SCBlock: React.FC = () => {
5
+ return (
6
+ <>
7
+ <div style={{ height: 1000, backgroundColor: '#e1e1e1' }} />
8
+
9
+ <ScrollableBlock direction="both" threshold={0.5}>
10
+ {(animation) => (
11
+ <AnimatedBlock
12
+ style={{
13
+ height: 500,
14
+ backgroundColor: '#3399ff',
15
+ opacity: animation.value,
16
+ transform: bInterpolate(
17
+ animation.value,
18
+ 'translateY(500px)',
19
+ 'translateY(0px)'
20
+ ),
21
+ }}
22
+ />
23
+ )}
24
+ </ScrollableBlock>
25
+ </>
26
+ );
27
+ };
package/example/src/components/SnapTo.tsx ADDED
@@ -0,0 +1,55 @@
1
+ import { useRef } from 'react';
2
+ import {
3
+ AnimatedBlock,
4
+ useDrag,
5
+ useAnimatedValue,
6
+ snapTo,
7
+ AnimationConfigUtils,
8
+ } from 'react-ui-animate';
9
+
10
+ import '../index.css';
11
+
12
+ export function SnapTo() {
13
+ const x = useAnimatedValue(0, { ...AnimationConfigUtils.ELASTIC });
14
+ const y = useAnimatedValue(0, { ...AnimationConfigUtils.ELASTIC });
15
+ const offsetX = useRef(0);
16
+ const offsetY = useRef(0);
17
+
18
+ const bind = useDrag(
19
+ ({ movementX, movementY, velocityX, velocityY, down }) => {
20
+ if (!down) {
21
+ offsetX.current = movementX + offsetX.current;
22
+ offsetY.current = movementY + offsetY.current;
23
+
24
+ const snapX = snapTo(offsetX.current, velocityX, [0, 600]);
25
+ const snapY = snapTo(offsetY.current, velocityY, [0, 600]);
26
+
27
+ x.value = snapX;
28
+ y.value = snapY;
29
+
30
+ offsetX.current = snapX;
31
+ offsetY.current = snapY;
32
+ } else {
33
+ x.value = movementX + offsetX.current;
34
+ y.value = movementY + offsetY.current;
35
+ }
36
+ }
37
+ );
38
+
39
+ return (
40
+ <AnimatedBlock
41
+ {...bind()}
42
+ style={{
43
+ backgroundColor: '#3399ff',
44
+ width: 200,
45
+ height: 200,
46
+ position: 'fixed',
47
+ left: x.value,
48
+ top: y.value,
49
+ boxShadow: '0px 4px 6px rgba(0,0,0,0.2)',
50
+ borderRadius: 10,
51
+ cursor: 'grab',
52
+ }}
53
+ />
54
+ );
55
+ }
package/example/src/components/TransitionBlock.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import { useState } from 'react';
2
+ import { TransitionBlock, AnimatedBlock, bInterpolate } from 'react-ui-animate';
3
+
4
+ export function TBExample() {
5
+ const [open, setOpen] = useState(false);
6
+
7
+ return (
8
+ <>
9
+ <button onClick={() => setOpen((prev) => !prev)}>ANIMTE</button>
10
+ <TransitionBlock state={open}>
11
+ {(animation) => {
12
+ return (
13
+ <>
14
+ <AnimatedBlock
15
+ style={{
16
+ width: 100,
17
+ height: 100,
18
+ backgroundColor: 'red',
19
+ translateX: bInterpolate(animation.value, 0, 500),
20
+ }}
21
+ />
22
+ <AnimatedBlock
23
+ style={{
24
+ width: 100,
25
+ height: 100,
26
+ backgroundColor: 'red',
27
+ translateX: bInterpolate(animation.value, 0, 500),
28
+ marginTop: 10,
29
+ }}
30
+ />
31
+ </>
32
+ );
33
+ }}
34
+ </TransitionBlock>
35
+ </>
36
+ );
37
+ }