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 |