https://github.com/michaelessiet/animate-on-scroll-framer

A simple animate on scroll library made using framer motion, typescript and react
https://github.com/michaelessiet/animate-on-scroll-framer

Last synced: about 1 month ago
JSON representation

A simple animate on scroll library made using framer motion, typescript and react

• Host: GitHub
• URL: https://github.com/michaelessiet/animate-on-scroll-framer
• Owner: michaelessiet
• License: mit
• Created: 2022-06-23T17:52:14.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-21T18:38:17.000Z (9 months ago)
• Last Synced: 2024-09-25T11:44:18.537Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://animate-on-scroll-framer-site.vercel.app/
• Size: 7.49 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Animate On Scroll Framer

An open source scroll reveal animation package made for React Web





Animate On Scroll Framer is an open source scroll reveal animation package made for React Web using tools such as framer motion. 

It's easy to install and get started with:

## Installation

```bash

npm install animate-on-scroll-framer 

```

and that's it it's installed in your React node_modules. No need for other packages or css libraries.

## Usage

Using the package in your project is as straight forward as can be.

```javascript

import {AnimateOnScroll} from 'animate-on-scroll-framer' //that's all you need to import 

export function Component(){

  return (

    

      
I appear with a cool animation called flipIn

    

  )

}

```

by default the flipIn animation has a duration of 1 second while the other animations have a default duration of 0.4 seconds. The default delay for all animations is 0.5 seconds. 


Both of those and more can be changed by adding them to AnimateOnScroll as props:

```javascript

  
I have a longer duration and delay than my friend up top


```

## Props

- **animation** : This prop is compulsory it is used to select the animation to be used

- **duration**: This is an optional prop that allows you to modify the duration of the animation. Values numbers and represent seconds

- **delay**: This is an optional prop that allows you to modify the delay of the animation. Values are numbers and represent seconds

- **animateEachChild**: For now this prop only applies to the flipIn animation. It is an optional prop which has a boolean value

- **spring**: This is another optional prop, it's used to switch on or off the spring effect in animations. It is switched on by default

#### License

Animate On Scroll Framer is under the MIT License.