react-magic-card 0.0.1 → 0.0.3
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/dist/MagicCircle/index.js +50 -27
- package/dist/MagicCircle/main.css +15 -0
- package/package.json +4 -2
- package/readme.md +1 -1
|
@@ -101,32 +101,55 @@ const MagicCircle = ({ data, width, height, radius, controller, start, dynamic,
|
|
|
101
101
|
}, []);
|
|
102
102
|
// angle between images.
|
|
103
103
|
const angle = parseFloat((2 * Math.PI).toFixed(15)) / data.length;
|
|
104
|
-
return (react_1.default.createElement(framer_motion_1.
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
104
|
+
return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
|
|
105
|
+
react_1.default.createElement(framer_motion_1.m.div, { ref: ref, className: className + ' ' + 'outer', style: {
|
|
106
|
+
width: radius * 2 + controller + 'px',
|
|
107
|
+
height: radius * 2 + controller + 'px'
|
|
108
|
+
}, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
|
|
109
|
+
react_1.default.createElement("div", { className: "inner", style: { width: radius * 2 + 'px', height: radius * 2 + 'px' } }, images.map((image, index) => {
|
|
110
|
+
const hasSelect = images[select] == images[index];
|
|
111
|
+
return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
|
|
112
|
+
scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
|
|
113
|
+
opacity: hasSelect
|
|
114
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectOpacity
|
|
115
|
+
: animate === null || animate === void 0 ? void 0 : animate.opacity,
|
|
116
|
+
rotateX: hasSelect
|
|
117
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateX
|
|
118
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateX,
|
|
119
|
+
rotateY: hasSelect
|
|
120
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
|
|
121
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateY,
|
|
122
|
+
rotateZ: hasSelect
|
|
123
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
|
|
124
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateZ,
|
|
125
|
+
rotate: -count
|
|
126
|
+
}, initial: {
|
|
127
|
+
scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
|
|
128
|
+
opacity: hasSelect
|
|
129
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectOpacity
|
|
130
|
+
: initial === null || initial === void 0 ? void 0 : initial.opacity,
|
|
131
|
+
rotateX: hasSelect
|
|
132
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateX
|
|
133
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateX,
|
|
134
|
+
rotateY: hasSelect
|
|
135
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
|
|
136
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateY,
|
|
137
|
+
rotateZ: hasSelect
|
|
138
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ
|
|
139
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateZ,
|
|
140
|
+
rotate: -count
|
|
141
|
+
}, transition: transition, onClick: () => setSelect(index), className: classImage + ' ' + classImageUnique + index, src: image.src, alt: image.alt, style: {
|
|
142
|
+
width: width + 'px',
|
|
143
|
+
height: height + 'px',
|
|
144
|
+
left: radius * Math.cos(index * angle) +
|
|
145
|
+
radius -
|
|
146
|
+
width / 2 +
|
|
147
|
+
'px',
|
|
148
|
+
top: radius * Math.sin(index * angle) +
|
|
149
|
+
radius -
|
|
150
|
+
height / 2 +
|
|
151
|
+
'px'
|
|
152
|
+
} }));
|
|
153
|
+
})))));
|
|
131
154
|
};
|
|
132
155
|
exports.MagicCircle = MagicCircle;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-magic-card",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "image gallery component with framer motion",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
7
7
|
"repository": {
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
},
|
|
12
12
|
"scripts": {
|
|
13
13
|
"tsc": "./node_modules/.bin/tsc",
|
|
14
|
+
"copy-css": "cp src/MagicCircle/main.css dist/MagicCircle/main.css",
|
|
15
|
+
"compile": "tsc && npm run copy-css",
|
|
14
16
|
"test": "test"
|
|
15
17
|
},
|
|
16
18
|
"keywords": [
|