https://github.com/kitze/react-genie

A set of React components for animating elements as they scroll into the viewport
https://github.com/kitze/react-genie

Last synced: 4 days ago
JSON representation

A set of React components for animating elements as they scroll into the viewport

• Host: GitHub
• URL: https://github.com/kitze/react-genie
• Owner: kitze
• License: mit
• Created: 2017-08-16T13:21:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-05-25T15:07:31.000Z (over 1 year ago)
• Last Synced: 2025-01-10T20:14:31.986Z (11 days ago)
• Language: TypeScript
• Homepage: https://codesandbox.io/s/react-genie-example-8xfsc
• Size: 1.3 MB
• Stars: 744
• Watchers: 8
• Forks: 19
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-star-libs - kitze / react-genie

README

        
# 🧞‍♂️ react-genie

### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)  

### Other projects:

- 💻 [Sizzy](https://sizzy.co) - A browser for designers and developers, focused on responsive design

- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops

- 🔮 [Glink](https://glink.so) - Changelogs, Roadmap, User Requests

- 🐶 [Benji](https://benji.so) - Ultimate wellness and productivity platform

- 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps

- 📹 [YouTube Vlog](https://youtube.com/kitze) - Follow my journey



## Used on [sizzy.co](https://sizzy.co)

![animation](https://i.imgur.com/0kK9C2P.gif)

## CodeSandbox

https://codesandbox.io/s/react-genie-example-8xfsc

## Demo

https://8xfsc.csb.app/

## Dependencies

- styled-components

- layout-styled-components

- react-animations

- react-intersection-observer

## Usage

`yarn add react-genie`

Just render the `RevealGlobalStyles` component anywhere, so it will add the class names for the animations:

```jsx

import {RevealGlobalStyles} from 'react-genie'

const App = () => {

  return (

    


      

      
 rest of the app 

    

  );

};

```


### Default animation:

```jsx

import {Reveal} from 'react-genie';

  
The default animation is fade in


```

## Props:

```js

{

  animation?: string; // animation class name

  delay?: number; // animation delay

  mode?: RevealMode; // "clone" or "wrap"

  debugName?: string; // if you specify it, you will get console logs

  style?: CSSObject; // extra styles

  onShowDone?: () => void; // callback after show

}

```

### Specifying animation using the `animation` prop:

```jsx

import {Reveal, Animation} from 'react-genie';

  
This title will slide in from the left


```

Hint: you can also pass your own class name here if you have custom animations.

### Wrap vs Clone

The default `mode` is `wrap`, so the children element will be wrapped in an additional div.

If you don't want that additional div, you can use `clone` or `RevealMode.Clone`.

```jsx

import {Reveal, RevealMode} from 'react-genie';

  
This h1 will be cloned instead of wrapped


```

In order for `clone` to work your element needs to accept `className`, `style`, and `ref`, as props. So, if you're trying to clone custom components, make sure they support these props.

### The `AnimatedTitle` component

```jsx

import {Reveal, AnimatedTitle} from 'react-genie';

  This sentence will animate in word by word

```

The `AnimatedTitle` component will split the `children` prop word by word (so it should be a string), and animate each word with a delay in between.