Animate in view

Animate in view is used to smoothly animate content when it hits the viewport.

Animate in view uses gsap along with gsap scroll trigger to animate content. There are currently three types of animations.

• One that simply animates/reveals the content from bottom when element reaches viewport and animates to bottom when content is about to leave the viewpor - (default).
• One that only fades in the content when it hits the viewport. (fadeIn).
• And one that animates in a 3D look witch can be used when using transparent pngs. Animates in both vertical scroll directions. (starWarsAnimation).

The default animation is integrated in the Image component. But can be used on any content in need of a smoother appearence.

Code examples

This is an example of the implementation for AnimateInView (Example uses fadeIn).

// Import AnimateInView component

import {AnimateInView} from "@components/animate-in-view";

<AnimateInView>
  <div>Everything within AnimateInView will be animated.</div>
</AnimateInView>

Example of star wars animation

Scroll up/down to see the effect.

Implementation of star wars animation

By the way the code-box below is animated with the default behavior of the animate in view component.

// Import AnimateInView and Image component

import {AnimateInView} from "@components/animate-in-view";
import { Image } from '@components/content/image';

<AnimateInView starWarsAnimation>
  // Note that we need to set noAnimation on Image because AnimateInView handles the animation.
  <Image src={importedImage} alt="Relevant Alt text" transparent noAnimation />
</AnimateInView>

Props table