Skip to content

React TypeScript library for effortlessly animating your website on scroll.

Notifications You must be signed in to change notification settings

nguyend-nam/scrollery

Repository files navigation

Scrollery

View on: NPMGitHub

Official website

Scrollery is a specialized UI library that empowers developers to effortlessly animate the contents as users scroll through websites. With Scrollery, you can create stunning, interactive, and engaging scroll animations that leave a lasting impression on your users.

Installation

yarn add @nguyend-nam/scrollery-ts

or install using npm:

npm i @nguyend-nam/scrollery-ts

Usage

Import wrapper components

import {
  LinearlyScaledWrapper,
  StackedWrapper,
} from "@nguyend-nam/scrollery-ts";

Using in the web

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

// ...

<LinearlyScaledWrapper 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"
  />
</LinearlyScaledWrapper>

<StackedWrapper 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"
  />
</StackedWrapper>

// ...

Preview

Official website & documentation

Contributing

Scrollery is an open-source project hosted on GitHub, and we encourage you to join us in shaping its future. Whether you have ideas for new features, want to report bugs, or are interested in improving the library's functionality, your contributions are highly valued. Visit our GitHub repository at https://github.com/nguyend-nam/scrollery to get involved and contribute to the project.

License

ISC

About

React TypeScript library for effortlessly animating your website on scroll.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published