Need help with react-genie?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kitze
726 Stars 18 Forks MIT License 43 Commits 16 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 22,289
React
GraphQL
Scala
dao
33 commits
# 567,101
TypeScr...
HTML
2 commits
# 451,512
HTML
PHP
1 commit
# 611,631
TypeScr...
HTML
1 commit

🧞‍♂️ react-genie

🙋‍♂️ Made by @thekitze

Other projects:

  • 💻 Sizzy - A browser for developers and designers
  • 🏫 React Academy - Interactive React and GraphQL workshops
  • 💌 Twizzy - A standalone app for Twitter DM
  • 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps

Used on sizzy.co

animation

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:
import {RevealGlobalStyles} from 'react-genie'

const App = () => { return (

rest of the app
); };

Default animation:

import {Reveal} from 'react-genie';


  

The default animation is fade in

Props:

{
  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:

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
.
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

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.