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 |