Published on

A beginner's guide how to animate react applications with AOS

Authors
banner

There are several options for implementing animations in React apps, but AOS is the easiest way to run CSS-based animations.

AOS allows control animation with css

The idea behind AOS is simple: observe all elements and their position according to the parameters you give them. Then add/remove class aos-animate. Of course, in practice it's not always that simple, but the idea behind AOS is just as simple. Every aspect of the animation is handled by CSS.

[aos='fade'] {
  opacity: 0;
  transition-property: opacity;
}

[aos='fade'].aos-animate {
  opacity: 1;
}

Setting up with react

As a first step in setting up with react, we will need to install the AOS dependencies using either npm or yarn

yarn add aos@next

if using typescript

yarn add aos@next @types/aos

We now have everything in place to integrate it with our react application. Initially, we will be adding it to the App.tsx file.

//app.tsx

import AOS from 'aos'
function App() {
  useEffect(() => {
    AOS.init({
      disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
      startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
      initClassName: 'aos-init', // class applied after initialization
      animatedClassName: 'aos-animate', // class applied on animation
      useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
      disableMutationObserver: false, // disables automatic mutations' detections (advanced)
      debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
      throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
      // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
      offset: 120, // offset (in px) from the original trigger point
      delay: 0, // values from 0 to 3000, with step 50ms
      duration: 400, // values from 0 to 3000, with step 50ms
      easing: 'ease', // default easing for AOS animations
      once: true, // whether animation should happen only once - while scrolling down
      mirror: false, // whether elements should animate out while scrolling past them
      anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
    })
  }, [])
}

Update the default settings according to your requirements. Check them in action on https://michalsnik.github.io/aos/

In the next step, we will use it to animate a React component. I have created a simple utility that you can copy and use to make your life easier.

//getAosProps.ts

interface AosPropTypes {
  name?:
    | 'fade'
    | 'fade-up'
    | 'fade-down'
    | 'fade-left'
    | 'fade-right'
    | 'fade-up-right'
    | 'fade-up-left'
    | 'fade-down-right'
    | 'fade-down-left'
    | 'flip-up'
    | 'flip-down'
    | 'flip-left'
    | 'flip-right'
    | 'slide-up'
    | 'slide-down'
    | 'slide-left'
    | 'slide-right'
    | 'zoom-in'
    | 'zoom-in-up'
    | 'zoom-in-down'
    | 'zoom-in-left'
    | 'zoom-in-right'
    | 'zoom-out'
    | 'zoom-out-up'
    | 'zoom-out-down'
    | 'zoom-out-left'
    | 'zoom-out-right';
  placement?:
    | 'top-bottom'
    | 'top-center'
    | 'top-top'
    | 'center-bottom'
    | 'center-center'
    | 'center-top'
    | 'bottom-bottom'
    | 'bottom-center'
    | 'bottom-top';
  anchor?: string;
  duration?: number;
  delay?: number;
  easing?:
    | 'linear'
    | 'ease'
    | 'ease-in'
    | 'ease-out'
    | 'ease-in-out'
    | 'ease-in-back'
    | 'ease-out-back'
    | 'ease-in-out-back'
    | 'ease-in-sine'
    | 'ease-out-sine'
    | 'ease-in-out-sine'
    | 'ease-in-quad'
    | 'ease-out-quad'
    | 'ease-in-out-quad'
    | 'ease-in-cubic'
    | 'ease-out-cubic'
    | 'ease-in-out-cubic'
    | 'ease-in-quart'
    | 'ease-out-quart'
    | 'ease-in-out-quart';
  once?: boolean;
}

const DEFAULT = {
  name: 'fade-up',
  duration: 1000,
  delay: 0,
  anchor: '',
  placement: 'bottom-bottom',
  easing: 'ease',
} as AosPropTypes;

export function getAosProps(animationProps?: AosPropTypes | undefined) {
  const settings = animationProps ? { ...DEFAULT, ...animationProps } : DEFAULT;
  const { name, duration, delay, anchor, placement, easing, once } = settings;
  const attrs = {
    'data-aos': name,
    'data-aos-duration': duration,
    'data-aos-delay': delay,
    'data-aos-anchor-placement': placement,
    'data-aos-easing': easing,
  };
  if (anchor) {
    attrs['data-aos-anchor'] = anchor;
  }
  if (once !== undefined) {
    attrs['data-aos-once'] = once;
  }
  return attrs;
}

Adding a simple animation when scrolling the page.

<div
  {...getAosProps({
    name: 'fade-up',
  })}
>
  {content}
</div>

In order to make it more interesting, we can add dynamic delays

cards.map((item, idx) => (
  <Card
    {...getAosProps({
      name: 'fade-up',
      anchor: '#cards',
      delay: idx * 200,
      placement: 'top-center',
    })}
  >
    {content(item)}
  </Card>
))

That's it for today. Have a nice day! Feel free to reach out to me on twitter if you have any questions.