Animated in view

Make experiments with different libraries for component appearing animations.

Check live demo here

Installation

1npm i @vincecao/animated-in-view
2yarn add @vincecao/animated-in-view
3pnpm 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

1// animate image element using React Spring
2<AnimatedSpringImage src="..." />
3
4// animate div element using React spring
5<AnimatedSpringDiv>...</AnimatedSpringDiv>
6
7// animate image element using Framer Motion
8<AnimatedMotionImage src="..." />
9
10// animate div element using Framer Motion
11<AnimatedMotionDiv>...</AnimatedMotionDiv>
12
13// animate image element using React Transition Group
14<AnimatedTransitionImage src="..." />
15
16// animate div element using React Transition Group
17<AnimatedTransitionDiv>...</AnimatedTransitionDiv>
18
19// animate image element using GSAP
20<AnimatedGsapImage src="..." />
21
22// animate div element using GSAP
23<AnimatedGsapDiv>...</AnimatedGsapDiv>

Animation libraries in examples

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