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

Name	Type	Default	Description	Required
children	`JSX.Element`		The single component for the content 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
isSticky	`boolean`	`true`	If `true`, then the content stays inside the viewport when animating
from	`number`	`100`	The starting size of the content
to	`number`		The ending size of the content

Components ParallaxWrapper