RotateWrapper

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

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
triggerOn"in" | "out""in"The prop to specify if the animation is triggered when the contents go in or out the viewport
isStickybooleantrueIf true, then the contents stay inside the viewport when animating
thresholdnumber1/3 view heightthe threshold where the animation is triggered
bottomLayerReactNodeThe bottom layer behind the contents
bottomLayerStyleCSSPropertiesThe styles you want to apply to the bottom layer
bottomLayerClassNamestringThe classes you want to apply to the bottom layer