[React] react-scroll-motion 사용하기

DEMO https://1000ship.github.io/react-scroll-motion/

설치하기

# Use npm
npm install react-scroll-motion

# Use yarn
yarn add react-scroll-motion

 

 

 

 

 

코드 예시 https://github.com/1000ship/react-scroll-motion/blob/master/_readme/docs.md

import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-motion";


<ScrollContainer snap="mandatory">
  <ScrollPage page={0}>
    <Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}>
      <MediumText>Let't me show you scroll animation 😀</MediumText>
    </Animator>
  </ScrollPage>
<ScrollContainer>

 

Markup

- ScrollContainer : 필수로 있어야함
- ScrollContainer 옵션: ('none' | 'mandatory' | 'proximity')
- ScrollContainer의 필수 자식요소로 ScrollPage가 있어야함
- ScrollPage is position: relative; thus, if you want use flexbox, make div in ScrollPage
- ScrollPage has page props for integer
- (Honestly, I don't like this way, is there awesome solution?)
- Animator는 ScrollPage안에 있어야함
- Animator has animation props

 

 

Animation Types and Usages

• Fade( from:number, to:number )
  • from : initial opacity number (0~1), default 0
  • to : final opacity number (0~1), default 1
• FadeIn( ... ), FadeOut( ... )
  • FadeIn is for only in-animation
  • FadeOut is for only out-animation
  • Also, MoveIn, MoveOut, StickyIn, StickyOut, ZoomIn, ZoomOut is there, and I'll skip writing descriptions about these In/Out
• Move( dx:number, dy:number, outDx:number, outDy:number )
  • dx : initial x value (unit: px), default 0
  • dy : initial y value (unit: px), default 100
  • outDx : final x value, default null
  • outDy : final y value, default -100
    • If outDx is null, then use dx value rather than outDx, outDy too.
• Sticky( left:number, top:number )
  • left : value of style.left (unit: %), default 50(%)
  • top : value of style.top (unit: %), default 50(%)
• Zoom( from:number, to:number )
  • from : initial scale value, default 10
  • to : final scale value, default 1
• batch( ...animations )

 

https://github.com/1000ship/react-scroll-motion