useAnimationOnScroll(scrollElem || null, {noRepeat : false})
- Install packages
npm install react-animate-on-scroll-animate.css animate.css --save
- Import the hook to the file you want to use animations in and also impport animate.css
import "animate.css"
import useAnimationOnScroll from "react-animate-on-scroll-animate.css"
- Start using in your animation
import "animate.css"
import useAnimationOnScroll from "react-animate-on-scroll-animate.css"
import {useRef} from "react";
//vertically scrollable component whose children should be animated.
export default function Component() {
const scrollElem = useRef(null)
useAnimationOnScroll(scrollElem || null, {noRepeat : false})
return (
//add ref
//specify the element which when it appears in the viewport triggers the animation
//add animation-settings attributes to the elements to be animated.
//Add animate__onscroll class to the classList of the element to be animated.
<div ref={scrollElem}>
<div className="animate-onscroll-trigger">
<p animation-settings="animate__fadeInDown animate__slower" className="animate__onscroll" >
hello world
</p>
</div>
</div>
)
}
The value of the animation-settings
attributes are to be the animate.css animaton classes except from and animate__animated
class.
S/N | Live link | Source code | Note |
---|---|---|---|
1 | My Portfolio's home page | here | This project originated from here. I wrote it initially while building my portfolio. |
I might not update this project in the future because of time. There are lot of features it could have. I am only publishing this because I do not want to keep on moving files just to use my code. I want to use via npm install
instead. It is 3:23 am 4/11/2024. I need sleep. I have a project I am working on simultaneously. Happy coding. Made with 🫡. Bye for now. Please make a pull request.