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

ParallaxWrapper StackedWrapper