VerticalFlipWrapper

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

NameTypeDefaultDescriptionRequired
childrenJSX.ElementThe single component for the content you want to animate on scroll
styleCSSPropertiesThe styles you want to apply to the wrapper
classNamestringThe classes you want to apply to the wrapper
thresholdnumber0The threshold (in pixels) to start applying the transition when the content enter/leave the viewport
disableFlipUpbooleanfalsePrevent the content from being flipped up
disableFlipDownbooleanfalsePrevent the content from being flipped down