107 lines
2.4 KiB
Plaintext
107 lines
2.4 KiB
Plaintext
---
|
|
title: Motion Effect
|
|
description: Motion effect component that displays the motion effect (fade in, slide in, etc.).
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="motion-effect-image-grid-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="motion-effect" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<MotionEffect slide>
|
|
<p>Motion Effect</p>
|
|
</MotionEffect>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Slide
|
|
|
|
<ComponentPreview name="motion-effect-slide-demo" />
|
|
|
|
### Fade Blur
|
|
|
|
<ComponentPreview name="motion-effect-fade-blur-demo" />
|
|
|
|
## Props
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the slide in',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
className: {
|
|
description: 'The className of the slide in',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
transition: {
|
|
description: 'The transition of the slide in',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: "{ type: 'spring', stiffness: 200, damping: 20 }",
|
|
},
|
|
inView: {
|
|
description: 'Whether the slide in is in view',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
inViewMargin: {
|
|
description: 'The margin of the slide in when it is in view',
|
|
type: 'string',
|
|
required: false,
|
|
default: '0px',
|
|
},
|
|
inViewOnce: {
|
|
description: 'Whether the slide in is in view once',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
delay: {
|
|
description: 'The delay of the slide in',
|
|
type: 'number',
|
|
required: false,
|
|
default: '0',
|
|
},
|
|
blur: {
|
|
description: 'The blur of the slide in',
|
|
type: 'boolean | string',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
slide: {
|
|
description: 'The slide of the slide in',
|
|
type: "boolean | { direction?: 'up' | 'down' | 'left' | 'right'; offset?: number }",
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
fade: {
|
|
description: 'The fade of the slide in',
|
|
type: 'boolean | { initialOpacity?: number; opacity?: number }',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
zoom: {
|
|
description: 'The zoom of the slide in',
|
|
type: 'boolean | { initialScale?: number; scale?: number }',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [Magic UI](https://magicui.design/docs/components/blur-fade) for the inspiration
|