StackedWrapper

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

NameTypeDefaultDescriptionRequired
childrenReactNodeThe contents you want to animate on scroll
styleCSSPropertiesThe styles you want to apply to the wrapper
classNamestringThe classes you want to apply to the wrapper
itemStyleCSSPropertiesThe styles you want to apply to each item
itemClassNamestringThe classes you want to apply to each item
getCurrentVisibleAmount(amount: number) => voidGet the amount of child items that appeard in viewport
transitionDebouncenumber0The debounce (in seconds) to trigger the animation