StackedWrapper

Example

index.tsx

import { StackedWrapper } from "@nguyend-nam/scrollery-ts";
import "./styles.css";
 
export default function StackedWrapperDemo() {
  return (
    <div className="layout">
      <h1 className="heading">
        <code>StackedWrapper</code>
      </h1>
 
      <StackedWrapper className="item-wrapper" itemStyle={{ height: 300 }}>
        <div className="item item-1" />
        <div className="item item-2" />
        <div className="item item-3" />
        <div className="item item-4" />
      </StackedWrapper>
    </div>
  );
}

API

Name	Type	Default	Description	Required
children	`ReactNode`		The contents 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
itemStyle	`CSSProperties`		The styles you want to apply to each item
itemClassName	`string`		The classes you want to apply to each item
getCurrentVisibleAmount	`(amount: number) => void`		Get the amount of child items that appeard in viewport
transitionDebounce	`number`	`0`	The debounce (in seconds) to trigger the animation

RotateWrapper VerticalFlipWrapper