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

StackedWrapper