Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/refirst11/react-magic-card
components for image gallery
https://github.com/refirst11/react-magic-card
animation components image-gallery react
Last synced: 3 months ago
JSON representation
components for image gallery
- Host: GitHub
- URL: https://github.com/refirst11/react-magic-card
- Owner: refirst11
- License: mit
- Created: 2023-06-20T14:09:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-07T08:03:46.000Z (7 months ago)
- Last Synced: 2024-11-28T20:09:31.265Z (3 months ago)
- Topics: animation, components, image-gallery, react
- Language: TypeScript
- Homepage: https://projects.su-pull.net/react-magic-card
- Size: 84 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
[](https://github.com/su-pull/react-magic-card/releases/latest)
[](https://bundlephobia.com/package/react-magic-card)
[](https://opensource.org/licenses/MIT)
This is the framer motion animation components, that support images gallery.
## Installation
```sh
npm install react-magic-card framer-motion
```
## Usage Guide
```tsx
import { StraightInfinity } from 'react-magic-card'
function MyComponent() {
const images = [
{
src: '/cat.jpeg',
alt: 'alt'
},
{
src: '/dog.jpeg',
alt: 'alt'
},
{
src: '/bird.jpeg',
alt: 'alt'
}
]
return (
)
}
```
## Common Properties
| Property | Meaning |
| --------------------- | ----------------------------------------------------------------- |
| images (required) | array of images and objects containing the src and alt properties |
| start (required) | index number of the array of start scale position |
| width (required) | width of the single image |
| height (required) | height of the single image |
| controller (required) | controller size is add to the size of the component |
| offsetIndex | add an offset to the index of the components and images |
| reverseIndex | order the change the overlap of zindex default true |
| className | className of the component |
| classImages | className of the images |
| classImageSelect | className of the select image |
| classImageUnique | className of the index number is assigned to the end |
| animate | object in the animation property |
| initial | object in the animation property |
| transition | object in the transition property |
| detailTransition | object in the transition property |
| detailProperty | object in the detail property |
| loading | loading attribute of img element in html |
| initialFadeRange | range of fade animation after page loaded |
| initialTransTime | transition time of fade animation after page loaded |
## CircleRotation Properties
| Property | Meaning |
| ----------------- | -------------------- |
| radius (required) | radius of the circle |
## StraightInfinity Properties
| Property | Meaning |
| -------- | --------------------------------------- |
| vertical | vertical or horizontal the default true |
| margin | spacing of the between images |
## Animation Object
| Property | Meaning |
| ------------- | ------------------------------------- |
| scale | scaling of the images |
| opacity | opacity or transparency of the images |
| rotate | rotation of the images |
| rotateX | X-axis rotation of the images |
| rotateY | Y-axis rotation of the images |
| rotateZ | Z-axis rotation of the images |
| selectScale | scaling of the selected image |
| selectOpacity | opacity of the selected image |
| selectRotate | rotation of the selected image |
| selectRotateX | X-axis rotation of the selected image |
| selectRotateY | Y-axis rotation of the selected image |
| selectRotateZ | Z-axis rotation of the selected image |
## Transition Object
It is Inherits framer motion transition object ease and (type: 'spring').
## detailProperty Object
| Property | Meaning |
| ----------- | ----------------------------------------------------- |
| classDetail | className of the detail image |
| white | white or black for background the default true |
| alpha | background transparency of a number between 0 ~ 1 |
| blur | blur intensity of a number between 1 ~ 20 a preferred |
| scale | scale of the detail image |
| rotate | rotation of the images |
## License
The MIT License.