React components for animating elements as they scroll into the viewport
source link: https://www.tuicool.com/articles/rua6VnR
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
♂️ react-genie
:raising_hand:♂️ Made by @thekitze
Other projects:
- :computer: Sizzy - A browser for developers and designers
- :school: React Academy - Interactive React and GraphQL workshops
- :love_letter: Twizzy - A standalone app for Twitter DM
- JSUI - A powerful UI toolkit for managing JavaScript apps
Used on sizzy.co
CodeSandbox
https://codesandbox.io/s/react-genie-example-8xfsc
Demo
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 ( <div> <RevealGlobalStyles /> <div> rest of the app </div> </div> ); };
Default animation:
import {Reveal} from 'react-genie'; <Reveal> <h1>The default animation is fade in</h1> </Reveal>
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'; <Reveal animation={Animation.SlideInLeft}> <h1>This title will slide in from the left</h1> </Reveal>
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'; <Reveal mode={RevealMode.Clone}> <h1>This h1 will be cloned instead of wrapped</h1> </Reveal>
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'; <AnimatedTitle> This sentence will animate in word by word </AnimatedTitle>
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK