react-magic-card 0.0.2 → 0.0.4

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 (4) hide show
  1. package/dist/MagicCircle/index.js +50 -27
  2. package/dist/MagicCircle/main.css +1 -2
  3. package/package.json +1 -1
  4. package/readme.md +0 -4
package/dist/MagicCircle/index.js CHANGED
@@ -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.m.div, { ref: ref, className: className + ' ' + 'outer', style: {
105
- width: radius * 2 + controller + 'px',
106
- height: radius * 2 + controller + 'px'
107
- }, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
108
- react_1.default.createElement("div", { className: "inner", style: { width: radius * 2 + 'px', height: radius * 2 + 'px' } }, images.map((image, index) => {
109
- const hasSelect = images[select] == images[index];
110
- return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
111
- scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
112
- opacity: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectOpacity : animate === null || animate === void 0 ? void 0 : animate.opacity,
113
- rotateX: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX : animate === null || animate === void 0 ? void 0 : animate.rotateX,
114
- rotateY: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY : animate === null || animate === void 0 ? void 0 : animate.rotateY,
115
- rotateZ: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
116
- rotate: -count
117
- }, initial: {
118
- scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
119
- opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity,
120
- rotateX: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateX : initial === null || initial === void 0 ? void 0 : initial.rotateX,
121
- rotateY: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY : initial === null || initial === void 0 ? void 0 : initial.rotateY,
122
- rotateZ: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ : initial === null || initial === void 0 ? void 0 : initial.rotateZ,
123
- rotate: -count
124
- }, transition: transition, onClick: () => setSelect(index), className: classImage + ' ' + classImageUnique + index, src: image.src, alt: image.alt, style: {
125
- width: width + 'px',
126
- height: height + 'px',
127
- left: radius * Math.cos(index * angle) + radius - width / 2 + 'px',
128
- top: radius * Math.sin(index * angle) + radius - height / 2 + 'px'
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/dist/MagicCircle/main.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .outer {
2
- position: absolute;
3
2
  display: flex;
4
3
  align-items: center;
5
4
  justify-content: center;
@@ -11,5 +10,5 @@
11
10
 
12
11
  .inner img {
13
12
  position: absolute;
14
- object-fit: "cover";
13
+ object-fit: 'cover';
15
14
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "image gallery component with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/readme.md CHANGED
@@ -59,10 +59,6 @@ function MyComponent() {
59
59
  }
60
60
  ```
61
61
 
62
- ## use LazyMotion
63
-
64
- because It is using 「m」 need to wrap it with LazyMotion at the root layout level.
65
-
66
62
  ## Properties
67
63
 
68
64
  - data: An array a images property objects for src and alt.