AosHooks
AosHooks is a collection of hooks to use with React and AOS library. It is a simple and easy to use library for animating elements on scroll.
Installation
npm install aos@next aos-hooks
npm install --save-dev @types/aosUsage
Firts, you need to initialize AOS in your app. You can do this by calling useAOSInit in your app component or by calling AOS.init in your app entry point. Bellow is an example of how to use useAOSInit:
import React from 'react';
import { useAOSInit } from 'aos-hooks';
export function App() {
// Here, you can pass options to useAOSInit
useAOSInit();
return (
<div>
<h1 data-aos="fade-up">Hello World</h1>
</div>
);
}Then you can use in and out event listeners to animate your elements. Bellow is an example of aos-hooks usage:
import { useAOSInit, useAOSIn, useAOSOut } from 'aos-hooks';
export function App() {
useAOSIn(({ detail }) => {
console.log('animated in', detail);
});
useAOSOut(({ detail }) => {
console.log('animated out', detail);
});
// using data-aos-id
useAOSIn('super-duper', ({ detail }) => {
console.log('animated in super-duper', detail);
});
// using data-aos-id
useAOSOut('super-duper', ({ detail }) => {
console.log('animated out super-duper', detail);
});
return (
<div>
<h1 data-aos="fade-up">Hello World</h1>
<div data-aos="fade-in" data-aos-id="super-duper">
<h2>Super Duper</h2>
</div>
</div>
);
}Next.js Usage
To use AOS with Next.js, you can both initialize AOS in your pages/\_app component using useAOSInit (like above) or by declaring the AOSInitializer component in your layout component. Bellow is an example of how to use AOSInitializer:
import React from 'react';
import { AOSInitializer } from 'aos-hooks';
export type LayoutProps = {
children: any;
};
export default function AppLayout({ children }: LayoutProps) {
return (
<html>
<head>
<title>aos-hooks</title>
</head>
<body>
<AOSInitializer />
{children}
</body>
</html>
);
}Note
AOS library is currently outdated and has some issues, and maybe some issues will be present in this library may be present as well.