react-magic-card 0.1.11 → 0.1.13
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.
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ This is the framer motion component, that supports illust and photograph galleri
|
|
|
12
12
|
npm install react-magic-card framer-motion
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
## Usage
|
|
15
|
+
## Usage Guide
|
|
16
16
|
|
|
17
17
|
```tsx
|
|
18
18
|
import { MagicCircle } from 'react-magic-card'
|
|
@@ -61,54 +61,62 @@ function MyComponent() {
|
|
|
61
61
|
}
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
81
|
-
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
|
86
|
-
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
-
|
|
98
|
-
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
64
|
+
## Common Properties
|
|
65
|
+
|
|
66
|
+
| Property | Meaning |
|
|
67
|
+
| ---------------- | ----------------------------------------------------------------- |
|
|
68
|
+
| images | array of images and objects containing the src and alt properties |
|
|
69
|
+
| width | width of the single image |
|
|
70
|
+
| height | height of the single image |
|
|
71
|
+
| start | index number of the starting scale position |
|
|
72
|
+
| controller | controller size is add to the size of the component |
|
|
73
|
+
| className | className of the component |
|
|
74
|
+
| classImages | className of the images |
|
|
75
|
+
| classImageSelect | className of the select image |
|
|
76
|
+
| classImageUnique | className of the index number is assigned to the end |
|
|
77
|
+
| animate | object in the animation property |
|
|
78
|
+
| initial | object in the animation property |
|
|
79
|
+
| transition | object in the transition property |
|
|
80
|
+
| pickTransition | object in the transition property |
|
|
81
|
+
| pickProperty | object in the pick property |
|
|
82
|
+
|
|
83
|
+
## MagicCircle Properties
|
|
84
|
+
|
|
85
|
+
| Property | Meaning |
|
|
86
|
+
| --------- | --------------------------------------------------- |
|
|
87
|
+
| radius | radius of the circle |
|
|
88
|
+
| dynamic | dynamic or static for rotation the default true |
|
|
89
|
+
| clockwise | direction of rotation when dynamic the default true |
|
|
90
|
+
|
|
91
|
+
## MagicStraight Properties
|
|
92
|
+
|
|
93
|
+
| Property | Meaning |
|
|
94
|
+
| ------------- | --------------------------------------- |
|
|
95
|
+
| vertical | vertical or horizontal the default true |
|
|
96
|
+
| margin | spacing of the between images |
|
|
97
|
+
| selectOffsetX | X-axis position |
|
|
98
|
+
| selectOffsetY | Y-axis position |
|
|
99
|
+
|
|
100
|
+
## Animation Properties
|
|
101
|
+
|
|
102
|
+
| Property | Meaning |
|
|
103
|
+
| ------------- | ------------------------------------- |
|
|
104
|
+
| scale | scaling of the images |
|
|
105
|
+
| opacity | opacity or transparency of the images |
|
|
106
|
+
| rotateX | X-axis rotation of the images |
|
|
107
|
+
| rotateY | Y-axis rotation of the images |
|
|
108
|
+
| rotateZ | Z-axis rotation of the images |
|
|
109
|
+
| selectScale | scaling of the selected image |
|
|
110
|
+
| selectOpacity | opacity of the selected image |
|
|
111
|
+
| selectRotateX | X-axis rotation of the selected image |
|
|
112
|
+
| selectRotateY | Y-axis rotation of the selected image |
|
|
113
|
+
| selectRotateZ | Z-axis rotation of the selected image |
|
|
114
|
+
|
|
115
|
+
## Transition Properties
|
|
116
|
+
|
|
117
|
+
It is Inherits framer motion transition properties other than intera.
|
|
118
|
+
|
|
119
|
+
## Pick Properties
|
|
112
120
|
|
|
113
121
|
| Property | Meaning |
|
|
114
122
|
| --------- | --------------------------------------------------------- |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-magic-card",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "image gallery component with framer motion",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -20,8 +20,10 @@
|
|
|
20
20
|
},
|
|
21
21
|
"keywords": [
|
|
22
22
|
"react",
|
|
23
|
-
"
|
|
23
|
+
"art",
|
|
24
24
|
"photograph",
|
|
25
|
+
"illust",
|
|
26
|
+
"gallery",
|
|
25
27
|
"animation"
|
|
26
28
|
],
|
|
27
29
|
"license": "MIT",
|