The easiest way to add scroll animations to your ChakraUI elements
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.
- ✨ 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 ⭐ 🐧
npm i @fvastu/animated-on-scroll-stack
or
yarn add @fvastu/animated-on-scroll-stack
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>
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 | 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. |
const animatedStackDefaultValues = {
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,
},
}
Since this package is using Scrollreveal.js, in case of commercial use check out their Commercial License