LinearlyScaledWrapper

LinearlyScaledWrapper

Example

index.tsx
import { LinearlyScaledWrapper } from "@nguyend-nam/scrollery-ts";
import "./styles.css";
 
export default function LinearlyScaledWrapperDemo() {
  return (
    <div className="layout">
      <h1 className="heading">
        <code>LinearlyScaledWrapper</code>
      </h1>
 
      <LinearlyScaledWrapper className="item-wrapper">
        <div className="item" />
      </LinearlyScaledWrapper>
    </div>
  );
}

API

NameTypeDefaultDescriptionRequired
childrenJSX.ElementThe single component for the content 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
isStickybooleantrueIf true, then the content stays inside the viewport when animating
fromnumber100The starting size of the content
tonumberThe ending size of the content