VerticalFlipWrapper
Example
index.tsx
import { VerticalFlipWrapper } from "@nguyend-nam/scrollery-ts";
import "./styles.css";
export default function VerticalFlipWrapperDemo() {
return (
<div className="layout">
<h1 className="heading">
<code>VerticalFlipWrapper</code>
</h1>
<div className="message">
<p>Start scrolling</p>
</div>
<div className="container">
<VerticalFlipWrapper className="item-wrapper">
<div className="item" />
</VerticalFlipWrapper>
</div>
</div>
);
}
API
Name | Type | Default | Description | Required |
---|---|---|---|---|
children | JSX.Element | The single component for the content you want to animate on scroll | ✓ | |
style | CSSProperties | The styles you want to apply to the wrapper | ||
className | string | The classes you want to apply to the wrapper | ||
threshold | number | 0 | The threshold (in pixels) to start applying the transition when the content enter/leave the viewport | |
disableFlipUp | boolean | false | Prevent the content from being flipped up | |
disableFlipDown | boolean | false | Prevent the content from being flipped down |