RotateWrapper
Example
index.tsx
import { RotateWrapper } from "@nguyend-nam/scrollery-ts";
import "./styles.css";
export default function RotateWrapperDemo() {
return (
<div className="layout">
<h1 className="heading">
<code>RotateWrapper</code>
</h1>
<RotateWrapper
className="item-wrapper"
bottomLayer={<span>Animate on Scroll</span>}
bottomLayerClassName="bottom-layer"
itemStyle={{ height: 200, width: 200 }}
>
<div className="item item-1" />
<div className="item item-2" />
<div className="item item-3" />
<div className="item item-4" />
</RotateWrapper>
</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 | ||
triggerOn | "in" | "out" | "in" | The prop to specify if the animation is triggered when the contents go in or out the viewport | |
isSticky | boolean | true | If true , then the contents stay inside the viewport when animating | |
threshold | number | 1/3 view height | the threshold where the animation is triggered | |
bottomLayer | ReactNode | The bottom layer behind the contents | ||
bottomLayerStyle | CSSProperties | The styles you want to apply to the bottom layer | ||
bottomLayerClassName | string | The classes you want to apply to the bottom layer |