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

or

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