Animated in view

Make experiments with different libraries for component appearing animations.

Check live demo here

Installation

npm i @vincecao/animated-in-view
yarn add @vincecao/animated-in-view
pnpm i @vincecao/animated-in-view

Props

• animateDisabled: boolean = false
• distance: number = 100
• delay: number = 200
• duration: number = 600
• type: "fade" | "slide-bottom-to-top" | "slide-left-to-right" | "slide-right-to-left" | "slide-top-to-bottom"

Usage

// animate image element using React Spring
<AnimatedSpringImage src="..." />

// animate div element using React spring
<AnimatedSpringDiv>...</AnimatedSpringDiv>

// animate image element using Framer Motion
<AnimatedMotionImage src="..." />

// animate div element using Framer Motion
<AnimatedMotionDiv>...</AnimatedMotionDiv>

// animate image element using React Transition Group
<AnimatedTransitionImage src="..." />

// animate div element using React Transition Group
<AnimatedTransitionDiv>...</AnimatedTransitionDiv>

// animate image element using GSAP
<AnimatedGsapImage src="..." />

// animate div element using GSAP
<AnimatedGsapDiv>...</AnimatedGsapDiv>

Animation libraries in examples

• React Spring
• Framer Motion
• React Transition Group
• gsap