https://github.com/vincecao/animated-in-view

Animate elements when they are showing on view
https://github.com/vincecao/animated-in-view

animation framer-motion react-spring

Last synced: 17 days ago
JSON representation

Animate elements when they are showing on view

• Host: GitHub
• URL: https://github.com/vincecao/animated-in-view
• Owner: vincecao
• Created: 2023-08-18T10:37:03.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-04T02:50:21.000Z (about 1 year ago)
• Last Synced: 2024-10-31T05:31:57.546Z (20 days ago)
• Topics: animation, framer-motion, react-spring
• Language: TypeScript
• Homepage: https://animated-in-view.vercel.app
• Size: 245 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated in view

Make experiments with different libraries for component appearing animations.



  





  



[Check live demo here](https://animated-in-view.vercel.app)

### Installation

```bash

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

```tsx

// animate image element using React Spring

// animate div element using React spring

...

// animate image element using Framer Motion

// animate div element using Framer Motion

...

// animate image element using React Transition Group

// animate div element using React Transition Group

...

// animate image element using GSAP

// animate div element using GSAP

...

```

### Animation libraries in examples

- [React Spring](https://www.react-spring.dev/)

- [Framer Motion](https://www.framer.com/motion/)

- [React Transition Group](https://reactcommunity.org/react-transition-group/transition)

- [gsap](https://greensock.com/)