DEV Community

CSS Animation Without CSS - AOS in Plain JS and React

NJOKU SAMSON EBERE on July 06, 2020

"CSS is beautiful but hard". Most developers can agree on that statement. In fact many backend developers left the frontend because of the diffi...

Read full post

Mohammed Nadeem Shareef • Mar 27 '21

I want to add something to the conversation.
If you are using React or NextJS

put your

AOS.init()

Inside a useEffect like so

useEffect(() => { AOS.init(); },[])

Without useEffect it will generate an error saying "document is not defined"

NJOKU SAMSON EBERE • Mar 30 '21

Thank you very much for your contribution.

Chibykes • Jul 18 • Edited

Calling AOS.init(); directly inside of a useEffect might give unexpected issues like: Animation already animated before element comes into view. This is due to useEffect runs when componentMounts and not when the DOMContentLoaded. Had to learn the hard hard way 🥲.

Instead create a useAOS hook like so:

// useAOS.tsx import { useEffect } from 'react'; import { useWindowSize } from 'react-use'; const useAOS = (options: Aos.AosOptions = {}) => { const windowSize = useWindowSize({ initialWidth: 1024, }); useEffect(() => { let AOS: Aos.Aos | undefined; const initAOS = async () => { AOS = (await import('aos')).default; AOS.init({ duration: 500, once: true, disable: windowSize?.width > 1024, // Disable AOS on small screens ...options, }); AOS.refreshHard(); }; initAOS(); return () => { AOS?.refreshHard(); }; }, [windowSize?.width, options]); // Reinitialize AOS on window size change }; export default useAOS; // App.tsx const App = () => { useAOS(); return( // your code... ); }

This allows me to import the AOS library only when the component has mounted, and gave me my expected animation result.

MxL Devs • Jul 7 '20 • Edited

Nice, declarative animation framework can speed things up tremendously.

Of course, one should understand the fundamentals to be able to build their own custom stuff, but for the average user who just wants to spice up their websites/profiles with a little extra on top without spending hours or days practicing CSS, letting someone else handle it makes things a lot easier.