@nguyend-nam/scrollery-ts NPM

Scrollery

React TypeScript library for animating your image gallery on scroll.

Installation

npm i @nguyend-nam/scrollery-ts

or install using yarn:

yarn add @nguyend-nam/scrollery-ts

Usage

Import wrapper components:

import {
  LinearlyScaledCardGroup,
  StackedCardGroup,
} from "@nguyend-nam/scrollery-ts";

Put the imgs inside the wrappers with some custom style/className:

// ...

<LinearlyScaledCardGroup className="w-full flex flex-col items-center gap-[800px] !mt-8 !mb-[800px]">
  <img
    src="/img/cat1.png"
    className="w-full h-full object-cover"
    alt="Coding cat"
  />
</LinearlyScaledCardGroup>

<StackedCardGroup className="w-full space-y-[1400px] !mt-8 !mb-40 px-4">
  <img
    src="/img/cat2.png"
    className="w-full h-full object-cover"
    alt="Flexing cat"
  />
  <img
    src="/img/cat3.png"
    className="w-full h-full object-cover"
    alt="Sitting cat"
  />
  <img
    src="/img/cat4.png"
    className="w-full h-full object-cover"
    alt="Sleepy cat"
  />
</StackedCardGroup>

// ...