@fvastu/animated-on-scroll-stack NPM

Introduction

animated-on-scroll-stack simplifies the process of incorporating captivating scroll animations into your Next.js project, seamlessly integrating with all ChakraUI properties. This project is a union between the ideas from next-reveal and the power of ChakraUI.

Why AnimatedOnScrollStack?

✨ Easily animate ChakraUI elements with captivating scroll animations.
🚀 Seamless integration with ChakraUI, leveraging its powerful features.
📚 Inspired by Scrollreveal.js – for more details, refer to https://scrollrevealjs.org.
🐧 ⭐ If you find this project helpful, give it a star ⭐ 🐧

Installation

npm i @fvastu/animated-on-scroll-stack

yarn add  @fvastu/animated-on-scroll-stack

Usage

AnimatedOnScrollStack

You can animate multiple elements which will result a sequence animation.

Basic usage Note that in AnimatedOnScrollStack you need to specify at least the delay and interval

'use client'

import { AnimatedOnScrollStack } from "@fvastu/animated-on-scroll-stack";

<AnimatedOnScrollStack interval={60} delay={500}  className='flex flex-wrap items-center justify-center'>
  <Card className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></Card>
  <Card className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></Card>
  <Card className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></Card>
  <Card className='bg-blue-400 h-12 w-12 xl:h-16 xl:w-16 m-2'></Card>
</AnimatedOnScrollStack>

Options/Animations

Option	Type	Description
`delay`	number	`delay` is the time before reveal animations begin.
`distance`	string	`distance` controls how far elements move when revealed.
`duration`	number	`duration` controls how long animations take to complete.
`easing`	string	`easing` controls how animations transition between their start and end values.
`interval`	number	`interval` is the time between each reveal.
`opacity`	`number \| null`	`opacity` specifies the opacity they have prior to being revealed.
`origin`	string	`origin` specifies what direction elements come from when revealed.
`rotate`	object	`rotate` specifies the rotation elements have prior to being revealed.
`scale`	number	`scale` specifies the size of elements have prior to being revealed.
`desktop`	boolean	`desktop` enables/disables animations on desktop browsers.
`mobile`	boolean	`mobile` enables/disables animations on mobile browsers.
`reset`	boolean	`reset` enables/disables elements returning to their initialized position when they leave the viewport. When `true` elements reveal each time they enter the viewport instead of once.
`useDelay`	string	`useDelay` specifies when values assigned to options.delay are used.
`viewFactor`	number	`viewFactor` specifies what portion of an element must be within the viewport for it to be considered visible.
`viewOffset`	object	`viewOffset` expands/contracts the active boundaries of the viewport when calculating element visibility.

Defaults

const defaultRevealOptions  = {
delay:  350,
distance:  '50px',
duration:  650,
easing:  'cubic-bezier(0.5, 0, 0, 1)',
opacity:  0,
origin:  'top',
rotate: {
	x:  0,
	y:  0,
	z:  0,
},
scale:  1,
cleanup:  false,
desktop:  true,
mobile:  true,
reset:  false,
useDelay:  'always',
viewFactor:  0.0,
viewOffset: {
		top:  0,
		right:  0,
		bottom:  0,
		left:  0,
	},
}

License

Since this package is using Scrollreveal.js, in case of commercial use check out their Commercial License

nextjs Next.js chakraui/react chakraui animation scrollreveal Scrollreveal.js next.js animation animation transform transition scroll

@chakra-ui/react next next-reveal react react-dom scrollreveal

@everything-registry/sub-chunk-348

5 months ago

5 months ago

5 months ago

5 months ago